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Preface 



Science de l'homme au travail, l'ergonomie a longtemps ete reservee a des 
specialistes du poste de travail exercant notamment dans l'industrie, sur les 
chaines de production, dans les processus de design et de conception, ou 
encore dans la conception d'interfaces logicielles. L'arrivee du Web au 
debut des annees 1990 a cependant fondamentalement change la donne. 

En effet, chacun a pu alors se lancer dans le developpement web, avec un 
minimum de competences et en respectant seulement quelques pre- 
requis techniques. Du simple « site perso » au grand site institutionnel, 
des cohortes de createurs ont done mis en place des menus, des liens, des 
designs, des systemes de navigation... autant d'elements d'une interface 
homme-machine. Bref, ils se sont improvises ergonomes. 

Or, comme tous les metiers sur le Web, l'ergonomie suppose de mai- 
triser un certain nombre de pre-requis theoriques, de methodes et de 
techniques bien definies. S'il est difficile de devenir ergonome en appre- 
nant ce metier « sur le tas », tout createur de site se devrait de connaitre 
les principales regies et bonnes pratiques de l'ergonomie et de l'utiiisabi- 
lite web. Apres quinze ans de developpement de sites Internet, ce 
chemin a ete partiellement suivi par les professionnels du Web. Mais 
nous ne sommes en fait qu'au debut de cet apprentissage. 

En effet, une nouvelle phase d'industrialisation et de rationalisation de la 
creation de sites web se profile devant nous. Jusqu'a present, les differentes 
composantes et competences mobilisees dans la conception web, dont 
bien sur l'ergonomie, intervenaient de maniere plus ou moins maitrisee ou 
ordonnee dans les processus de conception. Mais le developpement web 
n'est pas different de tous les autres secteurs industriels : ineluctablement, 
ce que les industriels pratiquent depuis de nombreuses annees sera tot ou 



tard mis en oeuvre sur les services web. Parmi les regies fondamentales qui 
ne manqueront done pas de s'imposer, j'en citerai trois : 

• Les phases de reflexion et de travail sur la qualite, l'ergonomie, mais 
aussi et surtout sur la cible, son confort et ses attentes, doivent etre 
integrees le plus en amont possible au sein des projets web. 

• Le developpement de produits mobilise un ensemble de processus, 
chacun possedant des entrees, parmi lesquelles les attentes des utili- 
sateurs, et des sorties, parmi lesquelles la satisfaction des internautes. 

• Pour finir, l'efficacite des processus et l'obtention de resultats cor- 
rects, notamment sur le plan ergonomique, ne doivent pas et ne peu- 
vent pas s'effectuer au prix d'une consommation demesuree de 
ressources. Cette « efficacite au meilleur cout » s'appelle l'efficience et 
e'est maintenant Fun des enjeux majeurs du developpement web. 

En resume, l'ergonomie web doit done maintenant passer du statut 
d'objectif salutaire d'un projet web au statut de moyen permettant de 
developper de meilleures interfaces, de la facon la plus rationnelle pos- 
sible. C'est la qu'entre en jeu l'ouvrage que vous avez entre les mains. 

Amelie Boucher fait partie d'une jeune generation d'ergonomes francais. 
Issus d'institutions de haut niveau, ils ont recu une formation initiale en 
ergonomie et en psychologie cognitive a la fin des annees 1990 et c'est 
tout naturellement qu'ils ont choisi d'appliquer leurs competences au 
monde du Web. Quoi de plus passionnant que d'exercer dans un 
domaine en pleine expansion ou tout ou presque reste a inventer ? 

En tant que qualiticien web, j'ai rencontre de tres nombreux ergonomes 
specialises dans le domaine des Interfaces Homme Machines (IHM). 
Nombre d'entre eux ont cree leurs propres sites, publie leurs articles, 
demarre leur activite de consultant. Mais, des la creation du site Ergolab 
en 2003 et la publication de ses premiers articles, Amelie Boucher a pris 
une place a part. 

En l'espace de quelques mois, elle a ainsi montre sa capacite a presenter de 
maniere tres synthetique et tres complete des thematiques jusqu'alors trai- 
tees de maniere desordonnee ou parcellaire. Apres quelques dossiers, les 
professionnels du Web francophone sont rapidement devenus des habitues 
d'Ergolab. Pour ma part, je le cite depuis plusieurs annees comme l'une des 
references essentielles pour l'ergonomie et l'utilisabilite web. Amelie pos- 
sede a la fois la rigueur et la persistance dans l'effort qui font toute la diffe- 
rence entre un ergonome de passage sur le Web et un professionnel qui a 
rapidement trouve sa place dans le paysage de l'ergonomie francophone. 

Ce livre repond a plusieurs problematiques : tout d'abord, il met a la 
portee de tous les methodes, les techniques et les connaissances ergono- 
miques. Bien entendu, tout le monde ne peut pas mettre en application 
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l'integralite des possibilites decrites dans l'ouvrage ; mais, a bien des 
egards, chacun peut, grace a ce livre, integrer a son propre niveau des 
notions et des methodes ergonomiques professionnelles pour gagner en 
efficacite et en efficience dans la production de sites web. 

Bien au-dela, a travers la prise en compte systematique du confort et des 
attentes de l'utilisateur final, ce sont toutes les demarches de conception 
qui sont remises en question. Marketing, qualite, urbanisation des sys- 
temes d'information, design : toutes ces activites ou disciplines gagnent 
a etre enrichies d'une approche ergonomique. 

Les reflexes et les methodes de l'ergonome meritent d'etre connus et 
appliques par tout un chacun a son propre niveau. De par sa rigueur et 
son approche methodologique, le livre d'Amelie permettra a bien des 
lecteurs de « faire de l'ergonomie » en ayant toujours sous la main une 
boite a outils complete, solide et bien sur utile et utilisable. 

Elie Sloim 
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Internet change, nous aussi ! 

Mars 2009. Void la deuxieme edition du livre Ergonomie Web, enrichie 
notamment de plus de cinquante nouveaux exemples, venant illustrer les 
differents chapitres et themes abordes. Depuis un peu plus d'un an 
maintenant, date de la premiere edition, le monde de l'lnternet a beau- 
coup change : certains sites ont disparu, d'autres ont ete modifies et de 
nouveaux ont vu le jour. Dans certains cas pratiques, la comparaison entre 
l'ancienne et la nouvelle version vous permettra de mieux comprendre 
comment interpreter les recommandations qui parsement cet ouvrage. 



Pourquoi ce livre ? 

Si Ton regarde rapidement ce qui se passe sur le Web francophone 
aujourd'hui, on peut faire le constat suivant : il y a de plus en plus de 
sites, mais aussi de plus en plus d'internautes, qui utilisent le Web de 
plus en plus souvent, pour faire de plus en plus de choses. Encore plus 
interessant, il existe un certain nombre d'activites pour lesquelles on ne 
peut plus se passer d'une interface web, ces dernieres tendant a rem- 
placer d'autres modes de communication (papier, telephone, fax, logi- 
ciels et machines en tous genres). 

Face a cette montee en puissance du Web dans nos vies, il importe de 
s'interroger sur les manieres de fabriquer des sites Internet. Aujourd'hui, 
le developpement de sites web est encore largement centre sur des pro- 
blematiques de technologie, d'image et de marketing. La soumission de 
nos methodes de conception a ces dimensions laisse souvent de cote ce 
qui devrait representer le point de depart de tout projet web, a savoir la 
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satisfaction et le confort de l'utilisateur final. Ainsi, la plupart des sites 
actuels manquent encore de l'essentiel : un vrai souci des internautes, de 
qui ils sont et de leurs besoins. 

Avec ce livre, nous souhaitons proposer un debut de reponse, a travers la 
presentation approfondie d'un mode de pensee et d'une trame metho- 
dologique bien specifiques. Nous essaierons de vous amener a connaitre 
et prendre en compte vos visiteurs tout au long du processus de concep- 
tion d'un site web et plus encore, tout au long de la vie de ce site. C'est 
ce que Ton appelle la conception centree utilisateur. 

Nous verrons que cette problematique n'est pas seulement une question 
d'humanisme ou d'ethique et quelle est capitale pour influencer le bon 
fonctionnement d'un site a tous les points de vue. En tenant compte de 
ses visiteurs, on peut ainsi s'attendre a optimiser le taux de transforma- 
tion et de visite d'un site, mais aussi a reduire les couts de developpe- 
ment et d'assistance. Concevoir un site oriente utilisateur permet de 
satisfaire les attentes que Ton a envers ce site, que ce soit d'un point de 
vue directement financier ou plus detourne (par exemple : augmentation 
des visites, de leur frequence, du nombre de pages visitees, du nombre 
d'inscriptions a une newsletter, du nombre de creations de compte, etc.). 
Enfin, plus largement, la conception centree utilisateur ameliore la rela- 
tion que peut entretenir un site, et souvent une marque, avec ses clients. 
Lorsque Ton analyse tous ces points, il parait evident que la conception 
de sites web doit integrer les questions d'ergonomie, voire en faire le 
cceur du processus de developpement. 

Notre objectif est done de vous aider a transformer vos pratiques de con- 
ception actuelles en de veritables pratiques orientees utilisateur. Ce but, 
que Ton peut atteindre de maniere assez simple, appelle de votre part 
quatre presupposes : 

• Que vous soyez convaincu de l'importance de l'ergonomie et en con- 
naissiez les objectifs. 

• Que vous disposiez de connaissances de base sur l'humain en general 
et les regies ergonomiques afferentes. 

• Que vous possediez des connaissances sur les visiteurs de votre site. 

• Que vous exploitiez ces connaissances et en obteniez de nouvelles par 
la mise en oeuvre de methodes de conception et d'evaluation. 

Le contenu de cet ouvrage est destine a vous donner les moyens de rem- 
plir ces quatre conditions, afin que l'ergonomie ne reste pas l'apanage 
des sites labellises comme tels. En effet, on croit trop souvent ne pouvoir 
faire de sites ergonomiques que sous la houlette d'un ergonome, alors 
que c'est tout a fait faux. II s'agit done ici de sortir l'ergonomie de son 
statut de connaissance privilegiee, pour que ses principes de base puis- 
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sent infiltrer l'ensemble des projets web. Ce que vous trouverez dans ce 
livre, c'est un condense de nos connaissances et de notre experience dans 
le domaine de l'optimisation du Web pour ses utilisateurs fmaux. 



A qui s'adresse ce livre ? 



Ce livre s'adresse a tous ceux qui pensent que Ton doit concevoir des 
sites web pour des internautes et qui veulent comprendre les principes et 
methodes que propose l'ergonomie web dans ce sens. Si vous lisez cet 
avant-propos, c'est probablement que vous etes deja interesse par notre 
problematique, que vous debutiez ou que vous souhaitiez approfondir 
vos connaissances. Si c'est le cas, qui que vous soyez, vous etes au bon 
endroit. Ce livre s'adresse en effet a tous les professionnels du Web (ou a 
ceux qui sont en passe de le devenir) et a tous les niveaux : 

• decisionnaire, chef d'entreprise, responsable d'activite web, directeur 
de clientele, responsable marketing ; 

• chef de projet, concepteur fonctionnel, architecte de 1'information, 
ergonome ; 

• directeur de creation, directeur artistique ; 

• developpeur, integrateur, webmaster. 

Selon votre metier, certains chapitres vous toucheront plus que d'autres, 
mais c'est tout au long du livre que vous trouverez de quoi nourrir votre 
pratique quotidienne. Le contenu de cet ouvrage vous interessera parti- 
culierement si vous souhaitez : 

• vous persuader du bien-fonde de la demarche ergonomique et de 
l'importance de l'integrer au cycle de conception ; 

• vous former aux fondements, regies et methodes de l'ergonomie arm 
d'en faire le socle de votre activite ; 

• acquerir des connaissances de base en ergonomie pour vous ouvrir 
l'esprit, affuter votre sensibilite ergonomique et orienter votre pra- 
tique metier dans ce sens. 

Vous n'avez besoin d'aucune connaissance prealable pour lire ce livre. II 
vous sera toutefois plus facile de comprendre les exemples que nous 
citons si vous etes habitue a naviguer sur le Web. Nous en appelons done 
davantage a votre experience d'internaute que de professionnel du Web. 

Si vous debutez dans la conception web, essayez de lire ce livre dans 
l'ordre, chapitre apres chapitre. En effet, nous vous fournirons au fur et a 
mesure les cles necessaires a la comprehension des chapitres suivants. 
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Si vous etes plus avance dans votre connaissance de l'ergonomie web, vous 
pourrez sans doute vous dispenser de cette lecture lineaire et piocher a 
votre guise parmi les thematiques de cet ouvrage. Nous nous sommes atta- 
ches a fournir de larges approfondissements theoriques, afin que vous 
puissiez mieux vous approprier les concepts de base de l'ergonomie et 
comprendre ce qui les sous-tend. De meme, le developpement des appro- 
ches methodologiques (audit, analyse concurrentielle, tri de cartes, test 
utilisateur) vous donnera de multiples conseils avances. Vous decouvrirez 
ainsi toutes les subtilites de ces demarches et les meilleures manieres de les 
appliquer en fonction de vos besoins et de vos possibilites. 



Est-ce que mon site est concerne ? 

Les principes et methodes que vous trouverez dans ce livre peuvent 
s'appliquer a n'importe quel contexte Web (site grand public, site specia- 
lise, outil en ligne, intranet, extranet, etc.). La plupart sont d'ailleurs lar- 
gement valables dans les contextes logiciels et applicatifs web. Vous 
verrez au fil des exemples que nos illustrations proviennent aussi bien de 
sites editoriaux que de sites de commerce en ligne, de sites vitrines d'une 
activite ou encore de sites « outils ». 

De meme pour les thematiques abordees, dont le spectre est volontaire- 
ment large : produits culturels, immobilier, banque, musique, alimen- 
taire, institutionnel, edition, vetements, etc. Cette diversite donne une 
dynamique interessante pour illustrer chacun des principes evoques, 
mais elle sert surtout a vous montrer que ces principes sont applicables 
quel que soit le contexte. Autrement dit, c'est vous qui etes porteur des 
specificites de votre projet web et l'ergonomie est la pour vous donner un 
cadre de reflexion, des objectifs generiques et des methodes de travail. 



Que vais-je trouver dans ce livre ? 

Chapitre apres chapitre, nous detaillerons ce qu'est l'ergonomie web, les 
principes et regies auxquels elle souscrit, ainsi que les methodes par les- 
quelles elle se propose d'optimiser la qualite d'utilisation d'un site web. 

Premiere partie - introduction a l'ergonomie web 

La premiere partie de ce livre a pour vocation de vous presenter ce qu'est 
l'ergonomie web, en evoquant ses objectifs et ses moyens (au chapitre 1). 
Elle nous permet aussi d'aborder certaines idees recues sur l'ergonomie 
web (chapitre 2). Nous vous expliquerons done en quoi certaines 
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reflexions tres frequentes dans les milieux web ne sont que des mythes, 
et comment vous pouvez vous en defaire pour arriver a une conception 
plus juste de ce quest l'ergonomie web. 

Deuxieme partie - dans la peau de votre internaute : les fondements de 
l'ergonomie 

Nous entrerons ensuite dans le vif du sujet avec la premiere etape de 
votre travail, c'est-a-dire savoir qui sont vos internautes, ce qui les carac- 
terise et comment prendre en compte ces informations pour y adapter 
votre site. Nous aborderons done au troisieme chapitre ce qui definit 
tous les internautes en tant qu'etres humains et, plus precisement, quel- 
ques grandes lois que vous devez connaitre pour concevoir un site web a 
destination d'un humain. Le quatrieme chapitre sera quant a lui con- 
sacre a ce qui definit votre internaute de maniere individuelle. Nous ter- 
minerons par la methode des personas, qui vous aidera a integrer cette 
vision au jour le jour dans votre pratique. 

Troisieme partie - les regies de l'ergonomie web 

La troisieme partie de ce livre a pour ambition de vous transmettre les 
cles de l'ergonomie web : vous y apprendrez dans le detail ce qui fait 
qu'un site est plus ou moins ergonomique, a travers la prise en compte 
de 12 regies de base. Coherence, comprehension, assistance, gestion des 
erreurs, satisfaction... : tout pour que votre internaute se sente a l'aise sur 
votre site et puisse avoir envie de revenir. Apres la lecture du chapitre 5, 
vous verrez les choses autrement et plus rien ne vous echappera ! C'est 
definitivement la meilleure maniere pour comprendre les objectifs de 
l'ergonomie a travers sa mise en application. 

Facile a comprendre, abondamment illustree d'exemples en tous genres, 
cette partie vous permettra de passer tres rapidement a la pratique. Elle 
se termine en effet sur le chapitre 6, dedie a l'audit ergonomique, que 
Ton peut mener de maniere plus ou moins formelle. Vous verrez qu'en 
considerant chacune des regies dans toutes vos decisions, vous parvien- 
drez a une qualite d'utilisation toute nouvelle ! 

Quatrieme partie - les etapes de la conception web : pensez votre site 
deAaZ 

Si vous faites de la conception web dans le cadre de votre metier, cette 
partie constituera le moyen de donner un nouvel elan a votre pratique 
quotidienne. Nous y aborderons les thematiques de la definition de con- 
tenus, de l'analyse concurrentielle (chapitre 7), de l'architecture de 
l'information et des interactions (chapitre 8) et enfin du maquettage 
conceptuel (chapitre 9). 
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Cinquieme partie - mettez votre site a I'epreuve 

La derniere partie de ce livre est entierement consacree a deux methodes 
privilegiees de l'ergonomie web, faisant intervenir des internautes pour 
qu'ils vous aident a comprendre leur maniere de naviguer sur le Web. 
C'est en effet en les observant et en discutant avec eux que vous arriverez 
a leur fabriquer un site sur mesure. 

A travers la methode du tri de cartes (chapitre 10), vous apprendrez a 
optimiser a peu de frais votre architecture de l'information, en fonction de 
la facon dont les utilisateurs rangent et nomment les choses dans leur tete. 

Enfin, avec la methode du test utilisateur (chapitre 11), vous pourrez 
toucher ce qui fait vraiment la specificite de la demarche ergonomique, 
dans sa volonte d'etre la plus proche possible des usages reels du Web et 
de ce qui les conditionne. 
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Premiere partie 



Introduction 

a I'ergonomie web 



Pour que les internautes apprecient de venir sur votre site et soient rentes d'y 
revenir, vous devez concevoir votre site pour eux. II existe une demarche, des 
regies et des methodes pour atteindre cet objectif. Dans cette premiere 
partie, nous allons definir ce quest la discipline que Ton appelle I'ergonomie 
web, mais aussi ce qu'elle n'est pas. 



chapitre 



1 



ergonomie generate 

(tous les objets) 



/ ergonomie des X. 

/ interfaces homme-machine \ 

(distributeur de billets, tableaux de bord automobiles, 
logiciels, ecrans de telephones mobiles, de GPS, etc) 



ergonomie informatique 

(interfaces logicielles et web) 



ergonomie web 

(interfaces web) 



L'ergonomie web, 
qu'est-ce que c'est ? 



Vous etes un etre humain et pas une journee ne se passe sans 
que vous n'utilisiez des objets qui vous sont exterieurs : radio- 
reveil, metro, livre, photocopieuse, ordinateur, distributeur 
de billets, supermarche, machine de musculation, etc. 
L'ergonomie a pour objectif d'adapter tous ces objets afin 
de vous faciliter la vie. Voyons comment elle se propose 
de le faire et les moyens quelle se donne. 
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BlBLlOGRAPWE L'ergonomie se propose 
de redonner du pouvoir a 1'Homme 

Si vous souhaitez etudier plus en detail I'emprise 
des machines sur I'Homme et le role de l'ergo- 
nomie dans ce cadre, vous devez absolument lire 
cet ouvrage : 

£Q Alan Cooper, The Inmates Are Running 
the Asylum: Why High Tech Products 
Drive Us Crazy and How To Restore The 
Sanity, Sams, 1999 




Figure 1-1 



Dans ce livre L'impact des caracteristiques 

generales et individuelles des 

internautes sur l'ergonomie web 

Nous aborderons I'importance de ces caracteristi- 
ques generales de I'etre humain dans le cadre du 
Web au chapitre 3 ; puis le chapitre 4 s'interessera 
a nos caracteristiques individuelles. 



Ameliorer l'ergonomie est une necessite qui s'impose lorsque Ton cons- 
tate a quel point les outils de notre quotidien nous menent la vie dure. II 
est tout a fait paradoxal qu'une machine a cafe ou qu'un ordinateur 
puisse prendre le dessus sur les personnes qui les utilisent. En effet, c'est 
nous qui fabriquons les machines. Nous devrions done etre capables 
de les concevoir pour qu'elles nous servent et non l'inverse. II s'agit alors 
de redonner du pouvoir a I'etre humain et c'est tout i'objectif de la 
demarche ergonomique. 



L'ergonomie, pour considerer I'homme 
dans le rapport homme-machine 

L'ergonomie est une discipline, une demarche, un point de vue que Ton 
peut appliquer a tout ce qui nous entoure. Au sens le plus general, elle 
concerne les outils utilises par I'etre humain. Dans les annees 50, Alain 
Wisner, un des pionniers de l'ergonomie en France, en donnait la defini- 
tion suivante : 

« L'ensemble des connaissances scientifiques 

relatives a I'Homme necessaires pour concevoir 

des outils, des machines et des dispositifs qui 

puissent etre utilises avec le maximum de 

confort, de securite et d'efficacite. » 

II est etonnant de constater que cette description est encore parfaitement 
adaptee aux pratiques actuelles de l'ergonomie et fonctionne bien dans le 
cadre du Web. Suivant les domaines d'intervention de l'ergonomie, 
chacun des objectifs de confort, de securite et d'efficacite aura plus ou 
moins d'importance. Par exemple, la notion de securite est beaucoup 
plus importante dans le domaine du nucleaire que sur un site de vente en 
ligne de vetements. 

Cette definition n'est cependant exacte que si Ton considere la connais- 
sance precise de l'activite d'un utilisateur comme une connaissance 
scientifique relative a I'Homme. En effet, il ne faut pas se restreindre a 
adapter nos outils aux caracteristiques generales de I'etre humain. 
N'oublions pas que nous sommes tres dependants de nos caracteristiques 
individuelles, des contextes dans lesquels nous evoluons et des objectifs 
que nous poursuivons. Cette notion de tache est primordiale dans la 
pratique ergonomique et permet de guider l'ensemble des processus 
d'analyse et de conception. Nous verrons par la suite de quelle maniere 
elle est prise en compte dans le domaine du Web. 



A ses debuts, la demarche ergonomique a surtout ete utilisee dans le 
cadre d'interventions sur des outils de travail, notamment sous l'impul- 
sion de la medecine du travail qui se penchait sur la problematique des 
maladies professionnelles. On se proposait alors d'analyser l'activite afin 
d'y adapter les postes de travail. Tres vite, ces necessites dans le domaine 
de la sante (soit dit en passant, tres liees a la notion de productivite) se 
sont elargies au domaine de la securite, avec notamment beaucoup de 
travaux dans les domaines du controle aerien et des centrales nucleaires. 
On restait toutefois dans la sphere du travail. Aujourd'hui, la demarche 
ergonomique s'est etendue aux objets auxquels nous sommes confrontes 
dans la vie de tous les jours, que ce soit sur le plan personnel ou 
professionnel : voitures, lecteurs de DVD, brasses a dents, machines a 
cafe, ordinateurs, etc. 



A SAVOIR L' evolution naturelle fait qu'on 
n'en a jamais fini avec I'ergonomie 

Attention, les premiers domaines d'application de 
la demarche ergonomique n'ont pas disparu. Cer- 
tains n'ont meme jamais ete autant d'actualite. 
Ainsi, on s'attache toujours a ameliorer les condi- 
tions de travail, a reduire le risque de maladies 
professionnelles et a optimiser les outils de travail 
dans les centrales nucleaires ou les centres de con- 
trole aerien. 
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L-ecreus. 
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MACHINE A CAFE 




Figure 1-2 

Differents objets que Ton peut optimiser d'un 
point de vue ergonomique. 



Ces quelques illustrations vous montrent l'omnipresence des problema- 
tiques d'ergonomie. Finalement, partout ou est l'homme, il y a de I'ergo- 
nomie. Cela ne signifie pas que Ton ait particulierement travaille sur ce 
point, mais plutot que chaque objet a un niveau de qualite ergonomique, 
que ce dernier soit bon ou mauvais. 

Pour que ces objets conviennent le mieux possible a leurs utilisateurs, il 
faut prendre en compte les caracteristiques de ces derniers des la concep- 
tion. On adoptera cette demarche quel que soit l'objet que Ton souhaite 
optimiser d'un point de vue ergonomique. Ainsi, selon Jean-Claude 



Remarque 
L'adaptation de I'outil a I'etre humain 

C'est la machine qui s'adapte : les caracteristiques 
de I'etre humain (anthropometric, memoire, rai- 
sonnement, langage, capacites perceptives, objec- 
tifs, envies, etc.) doivent etre au cceur du 
processus de conception. 



Sperandio, l'ergonomie se caracterise essentiellement par sa vocation a 
adapter les outils a l'homme. II y a reellement cette volonte d'action dans 
une demarche ergonomique de terrain. On est done loin des etudes de 
psychologie fondamentale, en laboratoire, qui cherchent a obtenir des 
connaissances de maniere rigoureuse et fiable. 

L'ergonomie se contente d'utiliser ces connaissances pour ameliorer le 
monde qui nous entoure et parvenir a une interaction plus sereine entre 
l'homme et la machine. L'outil ne doit pas nous penaliser, mais nous 
aider. Combien de personnes de votre entourage se plaignent de l'infor- 
matique, parce quelle les contraint a se conduire de maniere tres rigide 
et ne tient absolument pas compte de leurs besoins ? Pour renverser ce 
type de rapports, l'ergonomie informatique (et par extension l'ergo- 
nomie web) se propose d'analyser ce dont les utilisateurs ont reellement 
besoin et de mettre en oeuvre des methodes appropriees pour que l'interface 
finale reponde au mieux a ces besoins. 



Genealogie et objectifs de l'ergonomie web 

L'ergonomie web est la petite fille d'une longue lignee de disciplines qui 
tentent d'appliquer les principes de base de l'ergonomie sur differents 
types d'outils. Ainsi, elle est un sous-domaine de l'ergonomie informatique, 
qui descend elle-meme de l'ergonomie des interfaces homme-machine, 
sous-domaine de l'ergonomie « generale » : 



ergonomie generale 

(tous les objets) 



/S ergonomie des x. 

/ interfaces homme-machine \ 

(distributeur de billets, tableaux de bord automobiles, 
logiciels, ecrans de telephones mobiles, de GPS, etc) 



ergonomie informatique 

(Interfaces logicielles et web) 



Figure 1-3 

Vue hierarchique des differents domaines 
d'application de l'ergonomie. 



ergonomie web 

(interfaces web) 



Cependant, alors que les differentes branches de l'ergonomie poursui- 
vent un objectif commun, les moyens qu'elles mettent en ceuvre sont tres 
differents. Au point qu'etre ergonome n'est pas veritablement un 
metier : on est ergonome d'un type d'objets ou d'outils. En effet, la con- 
naissance du domaine et la contextualisation des normes sont telles que 
Ton ne peut pas etre specialiste en tout. 

Lorsque Ton arrive au niveau de l'ergonomie des interfaces homme- 
machine, les sous-disciplines commencent toutefois a presenter beau- 
coup de points communs. Vous verrez par la suite que les normes 
utilisees en ergonomie web valent aussi bien pour un site web que pour 
un logiciel de traitement de texte. Ce n'est qu'au moment de leur appli- 
cation que les recommandations seront contextualisees au support sur 
lequel on travaille. En fait, les manieres d'atteindre une bonne qualite 
ergonomique different, mais les criteres de base sont identiques. Par 
exemple, l'interface d'un distributeur de billets de banque doit respecter, 
au meme titre qu'un site web, les regies d'organisation visuelle, de cohe- 
rence, de conventions, de feedback, de comprehension, de liberte, etc. 

En fait, tout le domaine de 1'optimisation des interfaces homme-machine 
pour l'etre humain est lie a une problematique de communication entre 
celui-ci et la machine. Ainsi, lorsque cela ne fonctionne pas d'un point de 
vue utilisateur, c'est souvent parce qu'il existe un ecart important entre la 
vision du concepteur et celle de l'utilisateur final : ceci se traduit par une 
interface qui ne peut pas satisfaire ses usagers. C'est pourquoi il est pri- 
mordial d'orienter la conception en fonction de vos utilisateurs. Pour vous 
y aider, nous aborderons au chapitre 4 la methode des personas. 

Un site web ergonomique est un site utile et utilisable 

On peut commencer a qualifier un site web d'ergonomique lorsqu'il 
satisfait les criteres d'utilite et d'utilisabilite (figure 1-4). 



Dans ce livre Idee re?ue : « Faites-moi un site ergonomique » 

Vous verrez au chapitre suivant que, malheureusement, realiser un site web ergonomique 
reste du domaine de I'utopie. Mais pas de panique : si vous appliquez les conseils que nous 
vous donnerons tout au long de cet ouvrage, vous vous approcherez d'une qualite ergono- 
mique maximum. 



Voyons done maintenant un peu plus precisement ce que recouvrent 
chacune de ces deux notions. 



Dans ce livre 
Les regies de l'ergonomie web 

Nous aborderons en detail les regies de l'ergo- 
nomie web au chapitre 5. De cette maniere, vous 
pourrez savoir ce qui fait qu'un site est plus ou 
moins ergonomique. 



UTILITB 

(Repondre a un besoin) 

s CAPTBB 

Que les internautes viennent 

Les internautes viennent POUR faire quelque chose 



I + I 



unLiSAaiLire 

(Faciliter la satisfaction du besoin) 

Qu'ils restent et reussissent 
On doit les aider a y arrivor le plus FACILEMENT possible 




Figure 1-4 Les criteres d'utilite et 

d'utilisabilite doivent etre reunis 

pour obtenir une interface ergonomique. 



Dans ce livre Utilite et micro-utilites 

Nous aborderons en detail les notions d'utilite 
generale et de micro-utilites au chapitre 7 qui 
traite de la definition des contenus de votre site. 



La notion d'utilite 

La notion d'utilite concerne ce que l'interface permet de faire (autrement 
dit, ce a quoi elle sert pour l'utilisateur). Pour en juger, vous devez done 
necessairement avoir une idee des besoins et envies de vos visiteurs. Les con- 
naitre en detail vous permettra de deviner ce qui va leur etre utile ou non. 

Attention, la notion d'utilite est multi-dimensionnelle : 

• Elle a d'abord un sens general, renvoyant a la question suivante : a 
quoi sert mon site web ? Par exemple, il sert a acheter des livres. De 
ce point de vue, l'utilite consiste a offrir un service aux internautes 
ayant un besoin auquel on peut repondre. 

• Elle recouvre en outre des micro-applications en termes de services et 
fonctionnalites supportant l'utilite generale : on parle alors de micro- 
utilites. Cela consiste a offrir le meilleur service possible en fonction 
des besoins et objectifs des internautes. Les micro-utilites sont tres 
importantes pour enclencher le processus de prise de decision. Cela 
explique notamment que leur conception soit tres liee aux choix stra- 
tegiques et marketing. 

Si l'utilite, en repondant a un besoin, permet de capter un internaute, 
cela ne suffit pas. En effet, pour que cet internaute reste sur votre site et 
profite de son utilite, celui-ci doit etre utilisable. C'est la deuxieme 
grande dimension de l'ergonomie web. 



VOCABULAIRE Utilisabilite = Usability 

En anglais, le terme consacre est Usability. C'est a 
la fois plus facile a comprendre et a prononcer. 



La notion d'utilisabilite 

Lutilisabilite a pour objet la mise en oeuvre de la decision. C'est ici que les 
choses commencent veritablement, mais ici aussi qu'elles se gatent. 
Fournir un service aux internautes via une utilite generale est aujourd'hui 
une chose acquise. C'est pourquoi hors des micro-utilites et de l'utilisabi- 
lite, point de salut. Et, au vu des pratiques de plus en plus poussees pour 
optimiser lutilisabilite, vous n'avez plus aucune excuse pour l'oublier. 

En 2007, il n'est plus seulement question d'avoir un site Internet, il faut 
aussi avoir un site Internet qui marche. Cela passe essentiellement par la 
satisfaction de ses visiteurs. Un internaute satisfait est potentiellement 
un internaute qui revient. La boucle est bouclee, si Ton veut bien s'en 
donner la peine. 

La norme ISO 9241 definit lutilisabilite de la maniere suivante : 



« Un produit est dit utilisable lorsqu'il peut etre utilise 
avec ejficacite, efficience et satisfaction par des 
Figure 1-5 utilisateurs donnes, cherchant a atteindre des objectifs 

donnes, dans un contexte d'utilisation donne. » 



II y a dans cette definition quatre notions extremement importantes que 
nous allons detainer. D'une part, le mot donne {specified en version origi- 
nale) et, d'autre part, les notions d'efficacite, d'efficience et de satisfaction. 

Au depart : un utilisateur, des objectifs, un contexte 

La premiere chose a retenir de cette definition, c'est done que Ton tra- 
vaille a destination d'un utilisateur specifique, qui a des buts eux aussi 
specifiques et qui evolue dans un contexte bien precis. Ce contexte est 
principalement compose de l'environnement technologique, social, 
d'ambiance, dans lequel se trouve l'internaute. 

Votre but doit done etre de concevoir une interface au service de l'inter- 
naute et de la realisation de ses taches, tout en tenant compte du con- 
texte d'utilisation. Si Ton ne reussit pas a definir chacune de ces trois 
dimensions, on ne parviendra jamais a adapter le site web aux con- 
traintes de son utilisation. 

Autrement dit, vous n'avez aucun interet a essayer d'atteindre les objec- 
tifs d'efficacite, d'efficience et de satisfaction de maniere generique (c'est 
de toute facon quasi-impossible). Un utilisateur doit se trouver efficace, 
efficient et satisfait d'un resultat par rapport a des donnees de depart qui 
sont les suivantes : ce qu'il est, ce qu'il veut et l'environnement dans 
lequel il se trouve. Les chapitres 3 et 4 vous aideront a definir toutes ces 
dimensions le plus precisement possible. 

Objectif 1 : Efficacite 

Le premier objectif d'une interface utilisable, c'est Xefficaclte. Cela 
signifie qu'un utilisateur doit reussir a faire ce qu'il veut faire. Elle 
implique notamment des notions d'aisance d'utilisation et de facilite 
d'apprentissage. Lefficacite est le critere primordial a satisfaire pour les 
interfaces grand public et, plus largement, pour celles ou les necessites 
de seduire de nouveaux utilisateurs sont fortes. 

Objectif 2 : Efficience 

Lefficacite ne suffit pas. Certes, il est important que l'utilisateur reus- 
sisse a accomplir ses objectifs, mais il doit pouvoir le faire rapidement et 
avec le moins d'erreurs possibles. C'est ce que Ton appelle X efficience. 
Cette dimension est critique sur les interfaces specialisees, les applica- 
tions metiers, les outils et, plus largement, sur celles ou les necessites de 
conserver des clients existants sont fortes. 

Notez que les problematiques d'efficience sont plus frequentes dans le 
cadre d'applications specialisees, et souvent dans le cadre professionnel, 
mais qu'elles ont aussi leur importance dans d'autres contextes, ce que 
Ton oublie trop souvent. En effet, l'efficience a aussi son role a jouer 



VOCABULAIRE Conception orientee utilisateur 

On parle de conception orientee utilisateur 
au sens large lorsqu'une demarche de conception 
s'attache a prendre en compte les 3 dimensions de 
l'utilisateur, de ses taches et du contexte d'utilisa- 
tion. On considere alors que les taches et le con- 
texte font partie de la definition de l'utilisateur. 
Quant au cycle de conception centre utilisa- 
teur (ou CCU), il part de ces donnees et y attache 
des methodes specifiques. Ce cycle de conception 
est defini precisement dans la norme ISO 13407. 
Pour en savoir plus d'un point de vue theorique, vous 
pouvez lire cet article d'Ergolab : La conception 
centree utilisateur, a consulter sur : 
► http://www.ergolab.net/articles/conception- 
centree-utilisateur.html 



dans les sites web grand public que les internautes peuvent etre amenes a 
frequenter souvent et/ou longtemps (pensez a Amazon, Fortuneo, eBay, 
aux sites de petites annonces immobilieres, etc.). 

Enfin, ces deux premiers besoins doivent de toutes facons cohabiter. 
Dans l'absolu, une interface web doit toujours tendre vers la double 
optimisation de l'efficacite et de l'efficience. 

Objectif 3 : Satisfaction 

Le dernier composant de l'utilisabilite, c'est la satisfaction des utilisa- 
teurs. Dans ce cadre, votre objectif doit etre de mettre votre site web au 
service de ses visiteurs. Le Web est tres specifique par rapport a l'ergo- 
nomie des interfaces homme-machine principalement sur ce critere de 
satisfaction utilisateur. C'est en effet un support multi-fonctions, qui 
permet certes la realisation de certaines taches, mais qui integre egale- 
ment de maniere tres marquee des composantes esthetiques, marketing 
et plus largement de plaisir. 

On peut tout a fait imaginer venir sur un site web pour se detendre et se 
promener en naviguant au gre des rencontres. II est plus difficile d'envi- 
sager la meme chose sur un traitement de texte ou un distributeur de 
billets de train. II est a noter que le Web n'est certainement pas le media le 
plus marque par cette notion. Les exigences du jeu video le depassent par 
exemple de tres loin : les criteres ergonomiques generaux doivent meme y 
etre remanies ann de correspondre aux besoins du media (par exemple, il 
peut etre souhai table que les joueurs peinent a realiser une action). 



Point devue utilisateur C'est mieux, ailleurs 

On entend souvent lors des tests utilisateurs des 
remarques du type « Raaah, mais pourquoi ils ne 
font pas comme ca ? C'est quand meme pas com- 
plique, [nomdunsitequelconque] ils le font bien, 
eux, et du coup c'est super simple, on fait die, die 
et puis voila ». Fini le temps ou les internautes 
vous veneraient sous pretexte que vous leur offriez 
un service en ligne. Ils attendent maintenant que 
vous le fassiez bien et n'hesiteront pas a aller 
ailleurs si ce n'est pas le cas. Notez bien 
qu'ailleurs, ce n'est pas forcement sur le Web. 



Interet et retours sur investissement 

Oui, l'ergonomie a une facheuse tendance a 1'humanisme. Non, ce n'est 
pas de 1' argent jete par la fenetre (remplacez a loisir le terme argent par : 
temps, budget, investissement, effort...). Lexplication en est tres 
simple : en faisant attention a vos internautes, vous augmentez conside- 
rablement vos chances qu'ils vous apprecient, reviennent sur votre site et 
parlent de vous a leurs proches. Les sites Internet s'adressent a des utili- 
sateurs et ces derniers sont de plus en plus exigeants. Si leur niveau 
d'expertise web augmente a mesure qu'ils naviguent sur l'lnternet, leur 
niveau d'exigence croit egalement, tout comme leur connaissance 
d'autres sites, dont ceux de vos concurrents. 

La satisfaction utilisateur n'est cependant pas le seul retour sur investis- 
sement que vous pouvez tirer de la mise en oeuvre d'une demarche ergo- 
nomique, loin de la ! 
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Dans le domaine de l'ergonomie, il est extremement difficile de quanti- 
fier en termes d'argent le retour sur investissement. Alors que Ton peut 
facilement chiffrer le cout d'un projet, la qualite ergonomique se mesure 
par l'accroissement du nombre et de la profondeur des visites, mais aussi 
par l'efficacite et la satisfaction utilisateur. On peut done obtenir a la fois 
des mesures quantitatives et des mesures qualitatives. Les donnees qui 
semblent les plus interessantes a mesurer et qui sont touchees lors d'une 
amelioration ergonomique sont les suivantes : 

• Les ventes et taux de conversion : il est largement demontre et admis 
que lorsque les internautes ont plus de facilite a acheter, les ventes 
grimpent. 

• Les actions utilisateur de type creation de compte, inscription a des 
newsletters, etc. 

• Le trafic et sa qualite, le nombre de visites, de visiteurs, le nombre de 
pages vues, les fonctionnalites utilisees par les internautes, etc. 

• La performance des utilisateurs en termes d'efficacite et d'efficience. 
Ce type de mesure est un indicateur tres interessant en termes de 
productivite des applications metiers. 

• La satisfaction client, l'image de marque, etc. qui sont beaucoup plus 
difficiles a cerner et a quantifier. 

Enfin, et e'est non negligeable, de nombreuses etudes ont demontre que 
la mise en place d'un cycle de conception centre utilisateur permettait de 
reduire largement les temps de developpement, pendant le developpe- 
ment a proprement parler, mais aussi en corrections post-lancement. 
Nielsen pose ainsi qu'une modification coute 100 fois plus cher apres le 
lancement d'un site que lors de la phase de conception fonctionnelle. 

Toutes ces donnees doivent etre traitees avec la plus grande des precau- 
tions et ne pas etre interpretees trop rapidement. Ainsi, comment expli- 
quez-vous une augmentation du nombre de pages vues sur un site ? Est- 
ce du a un plus grand interet des internautes grace a un meilleur guidage 
et a une meilleure traduction de l'utilite du site ? Ou, a l'inverse, les 
internautes ont-ils du mal a trouver ce qui les interesse et consultent 
done des pages qui ne les concernent pas ? 

Ce qui complique encore l'utilisation de ces donnees, e'est que personne 
nest en mesure de calculer de maniere isolee combien rapporte une inter- 
vention ergonomique. Cela impliquerait en effet de conduire des ana- 
lyses comparatives en ne faisant varier que la qualite ergonomique. Or, 
lorsque Ton refond un site, on modifie en general son ergonomie, mais 
aussi son design, ses choix marketing et strategiques, ses choix techni- 
ques, etc. Tous ces facteurs vont avoir une influence sur la mesure de 
l'efficacite du site. II est done tres rare de pouvoir attribuer une augmen- 
tation des revenus ou de l'efficacite du site uniquement a un changement 
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d'ergonomie. Cela se comprend tres bien au vu des exigences economi- 
ques qui regissent l'lnternet. 

II est toutefois tres interessant d'effectuer des mesures comparatives lors 
de refontes de sites mettant en ceuvre une veritable demarche d'optimisa- 
tion de l'ergonomie. Le cas de la refonte de site est d'ailleurs le seul ter- 
rain d'etude envisageable pour evaluer le retour sur investissement d'une 
demarche ergonomique. C'est une activite beaucoup plus difficile, voire 
impossible, dans les projets de pure creation, puisqu'on ne dispose pas de 
metriques references. Ce que Ton observe sur les projets de refonte nous 
informe toutefois largement sur l'interet de mettre en place une 
demarche centree utilisateur et les benefices que Ton peut esperer en tirer. 

Jakob Nielsen et Shuli Gilutz ont ainsi produit en 2003 un rapport nomme 
Usability Return on Investment (Nielsen Norman Group), recensant 42 
etudes comparatives entre 1'utilisabilite d'un site existant et sa version 
refondue. Sur ces 42 projets, les mesures ont montre une augmentation de 
1'utilisabilite de l'ordre de 202 % (ce qui represents un facteur 3). 

Pour esperer obtenir un retour sur investissement consequent, encore 
faut-il mettre en oeuvre cette fameuse demarche ergonomique. Vous y 
arriverez en piochant dans le panel des methodes d'ergonomie celles qui 
conviennent le mieux a votre projet. 



Anecdote Le retour sur investissement de l'ergonomie web : la preuve par I'exemple 



Voici quelques exemples cites dans le rapport de 
Nielsen et Gilutz. lis demontrent bien que ['optimisa- 
tion de 1'utilisabilite a diverses consequences, mais que 
c'est toujours dans le sens d'une augmentation de ce 
que I'on souhaite voir croTtre. 

lis prennent ainsi I'exemple de la refonte des sites d'IBM 
en 1999 : une semaine apres le lancement de la nouvelle 
version, les ventes augmentaient de 400 %. Toujours 
dans le domaine de I'augmentation des ventes, la 
refonte d'un site vendant des cheesecakes a permis de 
passer de ventes negligeables a approximativement 
250 000 $ lors des fetes de fin d'annee, avec une aug- 
mentation du taux de conversion de l'ordre de 900 %. 
Prenons maintenant deux exemples avec des influences 
en termes de visites. Un mois apres le lancement de sa 
nouvelle version, le site du ministere des Finances 
d'lsrael a vu son temps de visite moyen augmenter de 
30 % et son nombre de pages visitees croTtre de 25 %. 
Les modifications ne portaient pourtant que sur I'archi- 



tecture de I'information et I'interface, et non le con- 
tenu. Meme tendance sur le site de Bell Canada : suite 
a une refonte orientee utilisateur, le nombre de visites 
par semaine est passe de 300 000 a 450 000. 
II est tres important de noter que I'on peut mesurer le 
retour sur investissement d'une modification de l'ergo- 
nomie meme lorsque celle-ci ne touche qu'une page ou 
qu'un detail d'un site. Nielsen et Gilutz donnent ainsi 
I'exemple de la refonte de la page d'accueil du site de 
I'artiste Richard Scott. D'une interface ne proposant 
qu'une peinture a la fois, ce dernier est passe a une 
interface presentant d'abord ses travaux sous forme de 
vignettes. Ce simple changement, relevant purement 
de I'optimisation ergonomique, a eu pour effet d'aug- 
menter les ventes en ligne de 30 % et le trafic de 20 %. 
Au vu des budgets attribues a l'ergonomie et de ce 
qu'elle peut rapporter, Nielsen et Gilutz proposent de 
depenser la moitie du budget d'un site a travailler sur 
1'utilisabilite. 
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Les methodes de I'ergonomie web 

Deux grandes families de methodes sont utilisees en ergonomie web. 
Elles se differencient selon qu'elles font intervenir ou non des utilisateurs. 
Les demarches ergonomiques serieuses couplent souvent les deux types 
de methodes afin de profiter des benefices de chacune. 



Methodes expertes 

La premiere famille de methodes utilisees en ergonomie web est consti- 
tuee des methodes dites expertes. Cette appellation laisse a penser 
qu'elles sont exercees uniquement par des experts en ergonomie, autre- 
ment dit des specialistes de cette discipline, dont c'est le metier. Or, 
paradoxalement, les methodes expertes ne sont pas reservees aux experts ! 
Ce terme est utilise pour les distinguer des methodes participatives, faisant 
intervenir des utilisateurs. 

En effet, les methodes expertes ne font intervenir que le cerveau du con- 
cepteur, lequel concoit ou evalue un site web au vu de ses connaissances, 
experiences et convictions. II s'agit done de confronter une interface web 
au jugement d'un intervenant charge d'evaluer la qualite ergonomique de 
cette interface. On fait confiance a cet intervenant qui, selon son niveau 
d' expertise, aura une maniere particuliere d'aborder les interfaces. Apres 
avoir acquis de l'experience dans ce domaine, l'ergonome repere de maniere 
presque reflexe les defauts ergonomiques du site web. 

Tableau 1-1 Les methodes expertes de I'ergonomie web 



Methode 


Dans ce livre 


Audit ergonomique 


Chapitre 6 


Specifications 
ergonomiques 


Realisation de plans de site 


Chapitre 8 


Realisation de flux d'interaction 


Chapitre 8 


Realisation de zonings et maquettes 


Chapitre 9 



Methodes participatives 

Lautre grande famille de methodes d'ergonomie web est constituee des 
methodes participatives. Ce sont la les methodes par excellence de 
I'ergonomie, puisqu'elles font intervenir les utilisateurs finaux des inter- 
faces. II s'agit d'aller observer, questionner, analyser le comportement et 
le discours des internautes sur votre site. Difficile de se situer plus pres 
de la preoccupation centrale de I'ergonomie, a savoir les utilisateurs. 

II est important de noter que I'ergonomie a une demarche particuliere en 
ce qui concerne les methodes participatives. La plupart des personnes 
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VOCABULAIRE Methodes participatives 
ou methodes utilisateur 

On parle aussi de methodes utilisateur : ce qui les 
definit est en effet de faire intervenir des utilisa- 
teurs finaux ou leurs representants (c'est-a-dire 
des personnes qui presentent les memes caracte- 
ristiques). 



Asavoir L'ergonomie web agit 
en amont et en aval 

La demarche ergonomique peut etre mise en 
oeuvre aussi bien en conception de site qu'en eva- 
luation d'un site existant. 



ont l'habitude des methodes marketing, des tests consommateurs ou des 
focus groups, qui n'ont rien a voir avec les methodes d'ergonomie web 
(nous en parlerons plus precisement au chapitre suivant). Les deux prin- 
cipaux facteurs differenciants sont les suivants : 

• Le nombre de participants : l'ergonomie web met tres rarement en 
oeuvre des methodes de groupe. Le plus souvent, le participant est 
rencontre seul et il est la cible de toutes les attentions. 

• L'objectivite de l'analyse : alors que le marketing cherche a obtenir 
l'avis subjectif des gens sur un sujet donne, l'ergonomie les interroge et 
les observe ann d'obtenir des donnees objectives sur ce qui conditionne 
leur activite sur le Web. 

Tableau 1-2 Les methodes participatives de l'ergonomie web 



Methode 


Dans ce livre 


Analyse de I'activite et etudes ethnographiques 


Non traite 


Entretiens et questionnaires 


Non traite 


Tri de cartes 


Chapitre 10 


Test utilisateur 


Chapitre 1 1 



La place de l'ergonomie dans un projet web 

L'ergonomie, plus qu'un metier porte par des personnes, doit etre une 
preoccupation permanente de tous les acteurs d'un projet web. Bien sur, 
il est tout a fait conseille qu'une personne, interne ou externe a l'equipe 
projet, soit chargee de l'ergonomie du site. Cependant, ce n'est pas suffi- 
sant si vous avez reellement envie de donner a votre projet une 
« couleur » orientee utilisateur. Tout le monde doit, d'une part, etre con- 
vaincu de l'importance de prendre en compte vos internautes et, d'autre 
part, disposer d'au moins quelques bases en ergonomie web. 

On dit que l'ergonomie est la science du compromis. Elle ne Test cepen- 
dant que si elle cherche a obtenir les contraintes de tous les metiers avant 
de commencer la conception. On apprend vite que c'est necessaire et que 
cela evite d'avoir travaille pour rien sur quelque chose d'irrealisable, de 
contraire aux objectifs strategiques, etc. 

Pour que les equipes projet parviennent a un niveau de connaissances en 
ergonomie suffisant pour ce qu'ils doivent en faire en plus de leur metier, 
quelques initiatives explicites sont necessaires. Lancez des actions de 
formation express, communiquez autour des livrables, faites des allers- 
retours, etc. Si les gens lisent d'eux-meme des livres d'ergonomie ou se 
renseignent sur le Web, tant mieux, mais vous ne devez pas vous reposer 
sur ce type d'acteurs plutot rare. Chacun cherche plutot a etre specialiste 
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dans son domaine, c'est d'ailleurs tout a fait louable et indispensable 
pour la qualite generale du produit fini. 

D'ailleurs, l'interaction entre l'ergonomie et le reste des activites ne se fait pas 
a sens unique : les contraintes de l'un peuvent influencer l'autre, et inverse- 
ment. Prenons 1'exemple de la richesse de l'interaction ergonome/designer 
lors de la phase de creation graphique. La conception fonctionnelle n'est 
pas realisee dans une tour d'ivoire et n'est pas intouchable, au contraire ! II 
arrive frequemment qu'une contrainte graphique fasse chercher et trouver 
une nouvelle solution de conception, qui peut fonctionner tout aussi bien, 
voire mieux. Ce type de situation est toutefois beaucoup plus courant 
lorsque le concepteur et le designer font partie de la meme entreprise, voire 
travaillent dans le meme bureau ou, en tout cas, se cotoient regulierement 
lors de rencontres, de reunions, d'ateliers de travail, ou autour d'un cafe. 

Lorsque concepteur et designer travaillent plutot au coup par coup, 
essayez de favoriser la regularite des echanges, surtout a des moments 
critiques, par exemple avant la livraison de la premiere page a valider 
d'un point de vue graphique par le client (c'est souvent la page d'accueil). 
Lorsque le client ou la direction a valide, il est souvent trop tard pour 
revenir sur les grands principes d'interface. 

Enfin, le suivi ergonomique est une activite primordiale. Si vous le 
negligez, vous risquez de perdre une bonne partie du benefice retire du 
travail mene sur le plan ergonomique. 

Bien sur, tous les acteurs d'un projet n'auront pas le meme niveau ni les 
memes connaissances en ergonomie, mais il est primordial que tous aillent 
dans la meme direction : celle du bien-etre de leurs utilisateurs. La partici- 
pation de tous a une qualite ergonomique globale est la condition sine qua 
non pour que votre site soit veritablement utile et facile a utiliser. 

Assurement, l'ergonomie peut susciter des discussions strategiques ayant un 
grand impact sur le deroulement d'un projet web. Le lieu de l'ergonomie 
permet d'aborder des sujets qui ne sont, sinon, jamais evoques tant les pro- 
jets web en France sont cloisonnes en termes de metiers : on fait de la con- 
ception (quand on en fait), puis du design, puis de la technique, le tout 
chapeaute par une gestion de projet souvent debordee. II y a de quoi laisser 
l'internaute sur le bord de la route. Or quel interet y a-t-il a lancer un site 
web si ce dernier ne vient pas satisfaire vos internautes ? C'est l'echec assure. 

L'ergonomie n'est pas quelque chose de difficile, d'obscur ou de magique. 
Vous verrez tout au long de cet ouvrage que la qualite ergonomique d'un 
site web s'obtient principalement au travers d'une multitude de details qui, 
mis bout a bout, participent d'un site reussi. Pour y parvenir, vous devez 
conjuguer deux principes que nous allons aborder dans ce livre : d'une 
part, l'application de methodes et, d'autre part, la prise en compte des 
connaissances, regies et bonnes pratiques de l'ergonomie web. 



VOCABULAIRE 
Appeler un chat un chat, ou pas... 

Dans la pratique, le mot ergonome ou ergonomie 
peut faire peur si vous evoluez dans un contexte 
oil la pratique est en gestation. Preferez done vous 
presenter d'une maniere plus comprehensible par 
tous (les termes de concepteur, concepteur fonc- 
tionnel, designer d'information ou d'interaction 
paraissent ainsi moins dangereux). 
En anglais, on dit usability specialist ou usabi- 
lity expert. Attention, le mot ergonomics est 
devenu un faux-ami, puisqu'il est essentiellement 
utilise dans le secteur de l'ergonomie physique et 
de I'analyse du travail. 



Point de vue 
Revenir a I'essentiel 

Ce livre a pour objectif de rassembler tous les 
metiers du Web autour d'un objectif commun : la 
satisfaction de l'internaute. Pour qui d'autre 
voulez-vous creer votre site ? 
Que vous soyez chef de projet, developpeur, direc- 
teur artistique ou webmaster, si vous exercez ce 
metier c'est afin de creer des sites Internet pour 
des gens. Vous apprendrez dans ce livre comment 
prendre en compte ces utilisateurs de maniere 
optimale. 
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chapitre 



2 




Top 10 des idees regues 
sur I'ergonomie 



Au-dela d'une definition de ce qu'est I'ergonomie, 
il est indispensable que vous sachiez ce qu'elle nest pas. 
Dans ce chapitre, nous remettons done en question les 10 
mythes les plus recurrents dans notre pratique quotidienne 
et essayons de vous donner des cles pour vous defaire 
de ces idees recues. 
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La sacro-sainte regie des 3 elks 



Anecdote Le mystere des 3 dies 

II semble que personne ne connaisse I'origine de 
cette regie, dont la paternite n'est attribuee a 
aucun auteur. 



Recommandation Se metier des regies 

La conception web est un domaine si contextuel 
que vous devez toujours vous mefier des pseudo- 
regies censees vous aider a creer des sites ergono- 
miques. II n'y a pas de regies sans exception et les 
projets web sont presque tous des exceptions tant 
ils recoupent des problematiques variees. La regie 
a cependant I'avantage de vous inciter a regarder 
au bon endroit, de diriger votre attention sur une 
problematique particuliere. Se preoccuper du 
nombre de dies est ainsi un premier pas pour com- 
prendre I'importance de I'architecture de I'infor- 
mation. 



Recommandation 
La formule magique des 3 dies 

Calculez votre impot en moins de 3 dies, com- 
mandez votre canape en 3 dies, 3 dies pour creer 
votre blog, etc. Ce type d'accroches est cense 
donner envie aux internautes de se lancer dans 
('utilisation de votre site, avec I'idee que ce sera 
simple et rapide. Pourquoi pas ! Utiliser cette 
phrase a destination de vos utilisateurs est sans 
doute la seule chose que vous ayez le droit de faire 
a bon escient. A I'inverse, vous ne devez pas I'uti- 
liser comme reference pour architecturer votre site. 
Autrement dit, pour attirer vos internautes, oui ; 
pour en faire un ideal de conception, non ! 



L'idee recue en quelques mots 

« Dans notre site Internet, toute information doit etre accessible en 
moins de 3 clics ». Si vous etes familier des projets web, cahiers des 
charges, chartes et documents de conception, vous avez deja du entendre 
ce genre de precepte. 

Ce que Ton va appeler la regie des 3 clics a pour ambition de rapprocher 
l'internaute de l'information qu'il souhaite atteindre. Elle est basee sur 
un constat : dans le monde du Web, le nombre de clics est un indicateur 
de la distance de 1'information ; plus celle-ci se trouve loin, plus j'ai 
besoin de cliquer. Le nombre de 3 clics est considere par certains comme 
le nombre d'actions maximal au-dela duquel la navigation ne serait pas 
optimisee. Derriere cette regie, on retrouve la crainte de perdre l'inter- 
naute a chaque fois qu'il effectue un nouveau clic. 

Etant donne que la plupart des responsables de site veulent a tout prix 
limiter ce risque et adorent les regies dont l'application est mesurable, la 
regie des 3 clics a une belle popularite. Elle fournit une solution que Ton 
peut mettre a l'epreuve a n'importe quel moment et devient un repere de 
la qualite de la navigation sur un site. 

Chaque projet web entraine done son lot de personnes « tournees vers 
l'internaute », qui pensent le satisfaire et le proteger en lui permettant 
d'acceder a n'importe quelle information en moins de 3 clics. 

Et voila qui explique pourquoi la regie des 3 clics est particulierement 
dangereuse. Ce sont precisement les personnes preoccupees par la faci- 
lite d'utilisation d'un site qui vont l'adopter, car elle semble une reponse 
parfaite au bien-etre de l'internaute. Or elle ne Test en aucun cas. 

Pourquoi faut-il se mefier de cette regie ? 

La regie des 3 clics enonce une idee qui parait de prime abord assez 
logique, posant qu'une information est plus difficile a atteindre a mesure 
que le nombre de clics augmente. Or e'est faux ! 

En effet, en assimilant la difficulte au nombre de clics, on prend surtout 
en compte la difficulte physique liee au clic, en laissant de cote la diffi- 
culte mentale. 

Bien sur, le versant physique a une importance. Voyez plutot : je clique, 
la page se recharge, j'analyse la nouvelle page. Le clic est done certaine- 
ment un indicateur de charge de travail pour l'internaute. 

Cependant, le cheminement precedent correspond a ce qui se passe lorsque 
l'internaute a clique sur le lien lui permettant effectivement d'atteindre la 
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page souhaitee. Imaginez que ce ne soit pas le cas : je clique, la page se 
recharge, j 'analyse la nouvelle page, je me suis trompe, je clique pour revenir 
en arriere, la page se recharge, j'analyse de nouveau la page d'origine, je 
clique sur un autre lien pour essayer une autre strategic 
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Figure 2-1 Ces deux exemples montrent que I'internaute peut atteindre I'information souhaitee en 2 dies, 

mais a condition qu'il ne se trompe pas. 

En outre, la regie des 3 clics elimine completement la complexite qui 
peut se cacher derriere chaque clic. Avant d'opter pour un lien, I'inter- 
naute engage tout un processus mental de comparaison et de selection. 
Votre objectif est de conserver a ce processus un caractere inconscient : 
le choix doit rester assez simple pour sembler une evidence. Si votre 
internaute a l'impression de reflechir et doute de Tissue de son clic, vous 
avez perdu la premiere partie de la bataille. 

Les internautes ne quittent pas un site parce qu'ils estiment avoir clique 
trop de fois. lis partent parce qu'ils ne trouvent pas ce qu'ils recherchent 
ou qu'ils ont l'impression de ne pas etre sur la bonne voie. C'est done 
avant tout cela qu'il faut eviter. 

En vous astreignant a respecter la regie des 3 clics covite que coute, vous 
risquez paradoxalement de compliquer la navigation sur votre site. En 
effet, si vous essayez d'« economiser un clic », vous risquez d'augmenter 
le nombre d'erreurs (ce qui, d'ailleurs, equivaut souvent sur le Web a 
augmenter le nombre de clics), mais aussi le temps de realisation de la 
tache (plus I'internaute mettra de temps a faire la balance entre deux 
liens, plus il lui sera long d'atteindre son but). 

Le nombre de clics n'est done pas assimilable a la facilite de navigation 
sur un site et 2 clics simples valent mieux qu'un seul complique ! 

Le bon cote de la regie, et comment aller plus loin 

La regie des 3 clics a le merite de pouvoir etre appliquee par n'importe qui 
de maniere immediate. Elle a done aide les professionnels du Web a 
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prendre conscience de l'importance du nombre de dies pour juger de la 
qualite ergonomique d'un site web. Mais il ne faut surtout pas s'arreter la ! 

Bien sur, plus on fait de clics, plus on descend dans les profondeurs du 
site. Et il existe evidemment un rapport entre le nombre de clics et la 
sensation que peut avoir un utilisateur d'etre perdu. Chaque clic que 
vous demandez doit done avoir un interet, une utilite, et etre reflechi. 

Cependant, veiller au nombre de clics ne doit pas vous contraindre a des 
choix qui compromettent la facilite de navigation sur votre site : le plus 
important est que l'internaute sache ou cliquer et qu'il ne se trompe pas ! 
Or ces deux objectifs peuvent vous obliger a decouper votre architecture 
de telle sorte qu'un clic de plus soit necessaire a l'utilisateur pour 
atteindre son but. La regie des 3 clics pose probleme lorsque Ton tra- 
vaille sur l'ergonomie d'un site puisqu'elle impose une limite stricte qui 
est souvent difficile a respecter. 

L'essentiel est done de comprendre l'effet positif que la regie des 3 clics 
cherche a produire sur la navigation, e'est-a-dire permettre a l'internaute 
d'atteindre facilement et rapidement son but. Vous devez essayer de 
reproduire cet effet plutot qu'appliquer la regie les yeux fermes. 



Dans ce livre Votre grand mere 
n'est pas votre internaute 

Rendez-vous au debut du chapitre 4 pour detruire 
I'idee re^ue selon laquelle « Si ga marche pour ma 
grand-mere, qa marchera pour tout le monde ». 



Les internautes sont des idiots 

On croit prendre en compte les internautes en se mettant a leur place ou 
en leur substituant un stereotype. Or rien n'est plus faux. Toute la 
demarche ergonomique consiste justement a connaitre vos internautes, 
ceux qui vont venir sur votre site. C'est pour eux que vous devez conce- 
voir et adapter votre site, et pour personne d' autre. Deux grandes ten- 
dances existent parmi les acteurs des projets web : 

• La sous-estimation des internautes. Cette demarche consiste a se 
dire : « si un enfant de 10 ans y arrive, tout le monde devrait y 
arriver ». C'est probablement vrai, mais aussi tout a fait contre-pro- 
ductif En appliquant ce genre de regies, vous risquez notamment de 
concevoir une interface ultra-guidee, simplified a 1' extreme, qui ne 
conviendra pas aux internautes ayant besoin d'accomplir rapidement 
leur tache. 

• La sur-estimation des internautes. Au palmares, des remarques de ce 
type : « Les internautes savent qu'il faut cliquer sur le logo pour 
retourner a la page d'accueil, moi je le fais bien » et « lis vont 
apprendre ». Enlevez-vous de la tete que vous etes l'internaute type 
ou que votre femme, votre mere, votre collegue representent l'inter- 
naute type. II n'en est rien. 
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Le conseil le plus important que Ton puisse vous dormer pour optimiser 
l'ergonomie de votre site est le suivant : vous ne devez pas reflechir au 
bien-etre des utilisateurs en general, mais savoir qui sont les internautes 
visitant votre site et prendre en compte leurs caracteristiques. Ainsi, la 
methode des personas vous sera tres utile pour integrer des profils utili- 
sateurs tout au long du cycle de conception. Nous l'evoquerons dans la 
seconde partie du chapitre 4. 



L'ergonomie et le design, ennemis jures 

Idee re^ue et realites du metier 

D'un cote « l'ergonomie tue le design », de l'autre « le design mine la qua- 
lite ergonomique a laquelle on aurait pu pretendre », sont autant d'idees 
recues sur les rapports entre ergonomie et design graphique. Certes, les 
deux disciplines n'ont pas les memes objectifs. De la a poser qu'elles sont 
entierement antinomiques, ily a un pas de geant... Chacune prouve quoti- 
diennement quelle peut apporter a l'autre un regard interessant sur sa 
propre pratique, mais aussi sur la qualite generate de l'interface produite. 

II est presque du ressort d'une decision strategique de choisir entre une 
interface extremement facile a utiliser et fonctionnelle ou une interface 
devant refleter une image de marque, servir de vitrine, etre belle et appe- 
tissante. Dans le premier cas, on adoptera une demarche ergonomique 
tres conventionnelle, alors que dans le second on sera beaucoup plus 
souple dans l'application des regies d'ergonomie. Nous posons volontai- 
rement les deux extremes en opposition mais la plupart des projets web 
sont au croisement de ces objectifs. 

C'est d'ailleurs souvent un choix qui s'impose de lui-meme, au vu des 
caracteristiques et objectifs du projet. Vous comprenez par exemple aise- 
ment pourquoi le site d'Yves Saint Laurent et celui de la Fnac ne peu- 
vent avoir la meme ligne de conduite quant au respect des principes 
d'ergonomie (figure 2-2). 

Dans le cas de projets tres exigeants du point de vue de l'image, des spe- 
cifications de conception uniquement ecrites et/ou schematiques peu- 
vent d'ailleurs s'averer interessantes afin de laisser s'exprimer la creativite 
du designer. Dans ce type de situation, il est alors primordial de pouvoir 
reagir tres tot d'un point de vue ergonomique en s'imposant quelques 
points de controle destines a eviter une catastrophe utilisateur. 
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Figure 2-2 

Le site d'Yves Saint Laurent et celui de la Fnac 

n'appliquent pas de maniere aussi stride les 

regies de I'ergonomie web, du fait d'exigences 

d'image differenciees. 

Sources : www.ysl.com / www.fnac.com 
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Lorsque des designers se sentent brides, paralyses ou blesses dans leur 
ego parce qu'ils doivent prendre en compte des recommandations ergo- 
nomiques, il n'est pas rare d'entendre de leur part des remarques du type 
« c'est tout a fait ininteressant de colorier une maquette fonctionnelle, 
bonjour la creativite... ». Or, rien a faire, I'ergonomie et le design, bien 
que tees proches par certains aspects, ne sont pas les memes metiers. 



22 



D'ailleurs, malgre ce type de discours, un designer trouve souvent tout a 
fait desagreable de devoir reflechir a tous les cas possibles avant de 
decider la position, l'apparence, le comportement et le vocabulaire attri- 
bues aux elements a l'ecran. Que tous ces details soient peses minutieu- 
sement avant de passer a l'etape graphique permet ainsi de liberer son 
cerveau vers ce qu'il fait de mieux : la realisation d'un site beau, esthe- 
tique, qui plaise subjectivement aux internautes. 

Soit dit en passant, un designer peut tout a fait etre en charge de la con- 
ception fonctionnelle d'un site web, s'il s'abstient lors de cette etape de 
toute consideration graphique. 

Ce qui nous preoccupe en premier lieu est de fabriquer un site web qui 
plaise a nos internautes sous toutes ses coutures. Et, pour y parvenir, 
point de salut hors d'une etroite collaboration entre ergonomie et design. 

Pourquoi I'ergonomie aime le design graphique 

Cette necessite de collaborer est d'autant plus importante que I'ergo- 
nomie ne peut se passer de design, tout d'abord parce qu'une maquette 
ergonomique est foncierement laide. A bien y regarder, ce ne sont que 
des carres et des mots, en noir et blanc, dont la vocation est tout sauf 
esthetique (si l'image ne se forme pas dans votre esprit, jetez un coup 
d'ceil au chapitre 9 pour constater l'etendue des degats). Cela ne suffit 
pas pour faire un site. Autrement dit, I'ergonomie sans design n'est rien. 
Chacun doit done jouer son role : on commence par penser l'interface de 
la maniere la plus intelligente possible pour optimiser son utilisabilite, 
puis on se sert de cette base pour le travail graphique. 

Ce n'est pas tout. Au-dela des necessites en termes de projet, I'ergonomie 
et le design doivent etre conduits en etroite collaboration car les deux disci- 
plines se nourrissent mutuellement. En particulier, le design graphique aide 
I'ergonomie quand il en respecte les recommandations. Ainsi, une maquette 
graphique basee sur une maquette fonctionnelle est souvent plus ergo- 
nomique que le support a partir duquel elle a ete creee (figure 2-3). 

Ceci provient des apports du design graphique en termes d'agencement, 
de hierarchie visuelle, de couleurs, de formes, de zones de respiration, 
etc., apports qui permettent de renforcer ce qui n'avait ete qu'esquisse 
dans la maquette conceptuelle. En outre, la concretisation graphique des 
principes conceptuels amene parfois a revoir certains choix, toujours 
dans l'objectif d'optimiser l'utilisabilite de l'interface. 

Enfin, le design graphique influence la qualite ergonomique de l'interface 
d'un point de vue utilisateur. En effet, rappelez-vous que l'utilisabilite 
n'est pas seulement la facilite d'utilisation, mais necessite de remplir des 
criteres d'efficacite, d'efficience et de satisfaction. C'est ce dernier point 
qui nous interesse plus particulierement dans le cadre de notre reflexion. 
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Dans ce livre Utilisabilite? 



Vous trouverez dans le chapitre precedent la defini- 
tion precise de l'utilisabilite telle qu'elle est presentee 
dans la norme ISO 9241, ainsi que {'explication 
detaillee de chacun de ses determinants. 
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Figure 2-3 

La maquette graphique a un niveau 

de qualite ergonomique plus eleve 

que son pendant conceptuel. 

Source : site de Lamy Formation, 

accessible a partir de www.lamy.fr 
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Pour qu'une interface soit utilisable, elle doit done etre en mesure de £ 

satisfaire ses utilisateurs. Or l'esthetique est un des parametres ayant une jjj 

grande influence sur le degre de satisfaction des internautes. C'est 3 

d'ailleurs souvent cela qui saute aux yeux et incite les visiteurs d'un site jjj 

Internet a l'apprecier ou non... ~ 

Le troisieme element expliquant la relation intrinseque entre ergonomie et S 

design vient du fait que le design graphique conditionne la perception de la ,2 

facilite d'utilisation d'un site web. Meme si, objectivement, deux maquettes ™ 

graphiques issues de la meme maquette fonctionnelle peuvent avoir le 
meme potentiel ergonomique, les utilisateurs en decident autrement. 

Ainsi, une etude realisee en 1983 par Tractinsky, Katz et Ikar montre 
que l'esthetique de l'interface influence la perception de l'utilisabilite du 
systeme. Les utilisateurs confronted a une belle interface auraient ten- 
dance a lui attribuer un meilleur niveau d'utilisabilite. Ce raccourci 
mental serait assimilable a celui suivant lequel, en general et sans en 
avoir conscience, nous avons tendance a associer plus de caracteristiques 
positives aux gens que Ton trouve attractifs physiquement. Ce stereotype 
du What is beautiful is good agirait done non seulement sur nos relations 
sociales, mais aussi sur nos relations aux interfaces informatiques et, plus 
largement, a tout ce qui nous entoure. Si votre site est joli, il y a done 
plus de chances pour que vos internautes le considerent facile a utiliser. 

Pour finir, l'ergonomie n'aura d'importance que si votre site est visite par 
des internautes et il a d'autant plus de chances de l'etre s'il est attrayant 
visuellement. Vous avez done besoin du design graphique pour que votre 
travail sur le plan ergonomique prenne encore plus de valeur. 

II faut voir l'interaction homme-machine pour ce quelle est : un 
melange de plusieurs criteres qui doivent concourir a une qualite globale 
d'utilisation. Parmi ces criteres se trouve l'utilisabilite. La beaute en est 
un autre. On y arrive done : non, l'ergonomie et le design ne sont pas des 
ennemis jures. Mieux encore, un site Internet ne pourra etre de bonne 
qualite que si ces deux disciplines travaillent main dans la main et reus- 
sissent a creer une experience utilisateur agreable. 

Malheureusement, les dissensions que nous evoquons ici entre l'ergo- 
nomie et le design ont aussi lieu sur d'autres territoires. La lutte peut faire 
rage entre les concepteurs, les developpeurs, les integrateurs, les specia- 
listes du marketing, etc. Souvent, chacun defend son propre interet et 
lache difficilement du lest sur ses croyances et exigences liees a l'exercice 
de sa profession. Or ce n'est qu'en travaillant ensemble que nous pourrons 
produire un Web de meilleure qualite. Ce livre a justement ete ecrit pour 
fournir a tous les acteurs d'un projet Web des connaissances de base en 
ergonomie, destinees a servir de base commune de reflexion. 
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Pas besoin d'ergonomie, on a fait 
un focus group 

Aujourd'hui encore, les gens confondent les tests utilisateurs et les focus 
groups. Cette meprise est essentiellement due au fait que ces deux 
methodes font intervenir des personnes reelles, dont les profils corres- 
pondent a ceux de votre public cible. Cependant, excepte ce point 
commun, rien ne permet de comparer un focus group a un test utilisa- 
teur. Deux differences fondamentales les opposent : 

• Le focus group, comme son nom l'indique, est une methode 
collective : on fait participer plusieurs personnes a la fois et c'est, 
d'ailleurs, ce qui fait l'efficacite de la methode. A l'inverse, le test uti- 
lisateur se deroule lors de sessions individuelles, ou un seul partici- 
pant navigue sur un site web en compagnie du responsable de l'etude. 

• Le focus group s'interesse aux avis subjectifs des internautes, c'est-a- 
dire a leurs opinions, alors que le test utilisateur observe des compor- 
tements reels de navigation arm de recueillir des donnees objectives. 
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Figure 2-4 

Difference entre les situations de focus group 
et de test utilisateur. Ce dernier point souligne 
bien la difference entre une approche marke- 
ting et une approche ergonomique. Cepen- 
dant, meme lorsque vous conduisez un test 
utilisateur en ergonomie, vous devez veiller a 
bien distinguer ce que disent les participants 
de ce qu'ils font, autrement dit de ce qui se 
passe en realite. En effet, il est tres facile de se 
laisser entramer par les avis subjectifs de vos 
participants (voir a ce propos le chapitre 11). 




D^a 



TEST UTIUSATBUe 



Pour finir, cette idee recue ne concerne pas que le rapport du focus group 
a une demarche ergonomique. Les memes remarques peuvent s'appliquer 
aux questionnaires, entretiens d'appreciation, sondages, ou toute autre 
methode faisant appel a revaluation subjective des gens et demandant 
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leur avis. Entendez bien que nous ne mettons pas en cause l'utilite de ces 
methodes, mais qu'il ne faut absolument pas les confondre avec la demarche 
ergonomique. 



Faites-moi un site ergonomique 

Au risque de vous decevoir, les sites web ergonomiques n' existent que 
dans nos reves. En effet, un site ne sera jamais ergonomique dans 
l'absolu. II ne pourra eventuellement l'etre que pour un internaute 
donne, a un instant donne, dans un contexte donne. Un site ergono- 
mique, c'est d'abord un site qui se preoccupe de ses internautes, non 
dans le discours, mais dans les actes. 

Nous avons vu au chapitre precedent que tous les objets ont une qualite 
ergonomique en soi, qui peut etre bonne ou mauvaise. Tout ce que vous 
pouvez faire, c'est done mettre en ceuvre des methodes d'ergonomie pour 
ameliorer ce niveau de qualite. Faites-le autant que possible au vu des 
caracteristiques de votre projet et tachez d'assimiler les grands principes de 
cette discipline arm de les garder en tete lors de votre travail quotidien. 



i 

CM 



Les internautes lisent en F 

On entend souvent dire que les internautes lisent en F (fonctionne aussi 
avec Z, E, ou toute autre lettre de l'alphabet). Ce type d'affirmation est 
tout a fait dangereux et ne doit surtout pas influencer votre maniere de 
concevoir un site web. Autrement dit, ne vous contraignez pas a organiser 
vos pages de telle maniere qu'elles respectent ces pseudo-sens de lecture. 

En effet, il n'existe pas de sens de lecture des pages web qui soit inscrit 
dans nos automatismes cerebraux. Tout ce qui conditionne les reflexes de 
lecture et de parcours d'une page web est du aux habitudes des inter- 
nautes et au contenu de la page web consultee. Ce sont done les pages qui 
produisent un comportement de lecture en F et non les internautes ! 
Void deux exemples pour vous convaincre que c'est bien le design de 
votre page qui induit un trajet de l'ceil. Commencons par un exemple 
abstrait et extreme, mais qui permet de comprendre tres rapidement 
l'essence du probleme : dans l'ecran ci-contre (figure 2-5), ou votre 
regard va-t-il se poser en premier ? 

Prenons a present un exemple reel : sur le site de l'album 5:55 de Charlotte 
Gainsbourg, les internautes lisent en V ou en anti-C. Peut-on pour autant 
etendre ces resultats a l'ensemble des sites web ? II est evident que non. 




Figure 2-5 Dans cet exemple, votre regard 

est attire de maniere reflexe vers le coin infe- 

rieur droit, car c'est le seul endroit de l'ecran 

qui contient quelque chose. 
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Figure 2-6 Deux sens de lecture possibles sur le site de I'album 5:55 de Charlotte Gainsbourg, 
dus au design de la page. Source : www.charlottegainsbourg.fr 

Pour resumer, c'est l'apparence du site, mais aussi son comportement 
(notamment dans le cas d'animations) qui influencent le parcours visuel 
d'une page web par les internautes. Ce sens de lecture n'a done rien a voir 
avec un comportement inne. II existe tout de meme un principe de base a 
prendre en compte. En effet, nos reflexes de lecture a l'occidentale condi- 
tionnent plutot une lecture de gauche a droite et de haut en bas. II parait 
done logique d'accorder plus d'importance au haut de page, puisque Ton 
suppose que c'est par cette zone que les internautes vont commencer leur 
exploration du contenu. Toutefois, pensez toujours que l'organisation et la 
presentation de votre page peuvent venir casser ces reflexes de lecture. 

En tout etat de cause, vous ne devez pas concevoir votre page en fonc- 
tion du sens de lecture d'une page web, mais adopter la solution la plus 
intelligente selon votre contexte. II est notamment beaucoup plus adapte 
de tenir compte des conventions web relatives a la localisation que de se 
baser sur un quelconque sens de lecture. Nous aborderons ce theme dans 
la regie n°4 du chapitre 5. 



L'ergonomie c'est juste du bon sens 

Quelle plus belle preuve que tous ces sites incomprehensibles pour demontrer 
que l'ergonomie n'est pas juste une question de bon sens ? Quelle plus belle 
observation que ces internautes soupirant, pestant, jurant parce qu'un site 
Internet est mal concu et ne leur fournit pas ce qu'ils devraient y trouver ? 
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Tous les gens qui concoivent des sites web sont dotes d'un quota d'intel- 
ligence raisonnable. Les sites web qui naissent sont pourtant loin d'etre 
tous egaux d'un point de vue ergonomique. Ce doit etre que l'optimisa- 
tion de l'ergonomie d'un site ne releve pas seulement du simple sens 
commun. En effet, quelques elements sont importants pour atteindre 
une qualite ergonomique acceptable : 

• Avant tout, il faut du temps pour veritablement reflechir de maniere 
centree sur l'utilisateur. J 

• II faut connaitre les principes de base de l'ergonomie, mais aussi avoir 
ete confronte a de nombreuses interfaces plus ou moins bien pensees. 

• A force de reflexion et de repetition, on prend des habitudes en 
termes de conception. Plus on travaille sur l'optimisation de l'ergo- 
nomie, plus on en arrive a avoir des reflexes de conception orientee 
utilisateur. 

• Enfin, cela demande parfois une expertise specifique lors de la mise 
en oeuvre de methodes ergonomiques (analyse de l'activite, tri de 
cartes, test utilisateur, etc.). 

Oubliez done les remarques du type : « Nous n'avons pas besoin de faire 
de l'ergonomie car nous sommes intelligents », « On a des gens chez 
nous qui ont des idees », etc. Votre objectif doit etre que chacun des 
acteurs concerne par votre site web ait au moins des notions de base en 
ergonomie. De cette maniere, tous contribueront a leur niveau a une 
bonne qualite ergonomique generale. 

En effet, l'ergonomie releve non seulement de celui qui en est garant au 
sein d'une entreprise, mais aussi de chacun des contributeurs au site 
final, que ce soit le graphiste, le developpeur, le redacteur, le webmaster, 
etc. Vous pouvez atteindre ce but en proposant des actions de formation 
ponctuelle, en distillant des conseils au quotidien et en redigeant une 
charte ergonomique, qui permet de decliner des principes de maniere 
coherente sur l'ensemble d'un site web. 



On le fera en Web 2.0, en Ajax, etc. 

On croit souvent que le recours a des concepts ou des technologies donnees 
a une influence sur la qualite ergonomique des sites web. Or e'est faux ! 

Les normes et objectifs de l'ergonomie restent les memes, quels que 
soient la technologie choisie ou le type de site realise. Si la technologie 
ou les fonctionnalites offertes dans un site doivent etre le point de 
depart, alors l'ergonomie en tiendra compte et essaiera de « faire avec » 
pour atteindre ses objectifs. 
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Nous verrons au chapitre 6 que les technologies sur lesquelles repose un 
site web peuvent vous orienter vers des defauts frequemment associes a 
celles-ci. Toutefois, ce n'est pas la technologie en soi qui peut determiner 
la facilite d'utilisation finale de votre site. 



Dans ce livre Seuil de scroll ? 



Un internaute devra scroller ou non en fonction de 
la configuration de son ordinateur. Pour savoir 
comment adapter la conception de vos pages a la 
notion de scroll, rendez-vous au chapitre 9. 



Les internautes ne scrollent pas 

Trop souvent, on croit que les internautes ne scrollent pas. Or vous n'en 
savez rien. En fait, tout depend du contexte. Les internautes scrollent 
lorsqu'ils ont l'impression que le site correspond a leurs besoins et que la 
suite de la page peut leur permettre d'atteindre leur objectif. 

Certaines questions ne se posent plus : l'internaute sait-il que Ton peut 
descendre dans la page (le probleme etait reel aux debuts du Web) ? Est- 
ce trop difficile (la democratisation de la roulette rend la consultation 
des pages web beaucoup plus facile qu'en actionnant un ascenseur 
vertical) ? Aiment-ils cela (ce n'est finalement pas tres important) ? Vous 
devez plutot vous pencher sur les problemes suivants : avez-vous besoin 
de placer beaucoup d'elements dans votre page, sont-ils tous primor- 
diaux, l'internaute peut-il penser qu'il va les trouver a cet endroit, etc. 
Ainsi, on doit distinguer deux types de page : 

• Dans une page de contenu : vous pouvez tout a fait vous permettre de 
scroller. C'est meme recommande si vous voulez presenter du con- 
tenu de qualite, qui apporte reellement des informations a votre visi- 
teur (qu'il s'agisse d'un article scientifique, d'une fiche produit ou 
d'un contenu du meme acabit). Surtout, ne sacrifiez jamais un point 
auquel vous tenez sous pretexte que les internautes ne scrollent pas. 
D'autre part, cette croyance ne doit pas non plus vous contraindre a 
presenter un article long sur plusieurs pages, alors que cela complique 
l'activite de lecture a l'ecran. 

• Dans une page navigante ou transactionnelle, vous pouvez vous per- 
mettre de scroller dans deux cas : si c'est adapte aux besoins de vos per- 
sonas en termes fonctionnels et si les contenus qui se trouvent sous le 
seuil de scroll ne sont que secondares. Ainsi, le scroll peut etre tres 
avantageux au niveau fonctionnel. II peut notamment favoriser les 
actions de consultation et de comparaison mentale des items d'une liste. 
C'est ce qui explique pourquoi les paginations de listes gagnent souvent 
a etre accompagnees d'une fonctionnalite Tout sur la mime page. 

La lecture d'une page tres verticale est parfaitement appropriee aux acti- 
vites d'exploration de contenu et de decouverte. Voyez ainsi comme les 
pages d'accueil du Monde et de Reservoir Jeux sont tres longues : 
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Figure 2-7 

La page d'accueil du Monde fait environ 3350 pixels de haut, 

et celle de Reservoir Jeux 2250 pixels. 

Sources : www.lemonde.fr / www.reservoir-jeux.com 
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ALLER PLUS LOIN 
Les internautes scrollent, par ClickTale 

ClickTale a realise fin 2006 un recensement sur 
120 000 pages vues, en constatant les trois choses 
suivantes : 

• 91 % des pages du panel etaient scrollables ; 

• Les internautes ont scrolle sur 76% de ces 
pages ; 

• lis sont meme descendus jusqu'en bas de 22% 
de ces pages. 

Pour lire I'etude complete : 

► http://blog.clicktale.com/?p=19 



On soutient ainsi deux types de strategies. D'une part, les visiteurs qui 
utilisent la page d'accueil uniquement pour naviguer vers un contenu 
precis a l'interieur du site y parviennent grace aux elements situes en 
premier dans la page. Cela permet par exemple de consulter les toutes 
dernieres actualites ou la section Culture sur le site du Monde, et 
d'acceder a la rubrique Jeux de societe ou aux toutes dernieres nou- 
veautes produits sur le site de Reservoir Jeux. 

D'autre part, pour ceux qui attendent que le site leur propose des choses, 
on fournit le maximum d'entrees possibles vers les pages internes (mise 
en avant des contenus les plus recents par thematiques, des contenus les 
plus consultes, de cles d'entree complementaires en termes de naviga- 
tion, etc.). Ce qui est interessant, c'est que tout ceci est possible sans 
gener l'activite de nos premiers internautes. En effet, ces derniers trou- 
vent ce qui les interesse plutot en haut de page et n'iront done pas plus 
loin dans l'exploration de la page d'accueil (autrement dit, des qu'ils 
trouvent un lien adapte a ce qu'ils recherchent, ils cliquent et s'en vont 
consulter la page suivante). 



Figure 2-8 

Le bouton d'action principal de cette page 
n'est pas visible avant la barre des 570 pixels 
(trait gris sur notre image), correspondant a 
I'espace visible sans scroller pour une resolu- 
tion d'ecran de 1 024 x 768 pixels. 
Source : www.3suisses.fr 
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Les internautes scrollent tout a fait naturellement pour lire la suite d'un 
article, d'une recette, d'un descriptif produit, etc. Toutefois, ils ne 
devraient pas avoir besoin de scroller pour voir et actionner les elements 
primordiaux de votre page. Cette recommandation, outre quelle evitera a 
vos internautes de faire denier les pages, est un tres bon moyen de les 
guider. En effet, la visibilite des elements d' action permet aux internautes 
de comprendre a la fois l'objectif du site et ce que Ton attend d'eux. 

Ainsi, cet exemple sur une page produit du site des 3 Suisses ou Ton ne 
voit pas de bouton Ajouter au panier avant le seuil de scroll (figure 2-8). 
Cette problematique est accentuee par le fait que les contenus situes 
juste avant ce seuil n'indicent pas une suite fonctionnelle, mais plutot 
une suite promotionnelle (mise en avant de solutions de credit). 

Enfin, si votre page est plus longue qu'un ecran, faites attention a bien 
montrer quelle continue. Vous devez notamment veiller a ne pas « couper » 
la page avec du blanc. Sinon, les internautes auront l'impression quelle 
est terminee, et qu'ils n'ont pas besoin de scroller. 



VOCABULAIRE Cut-off design 
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Le principe du cut-off design consiste a conce- 
voir vos maquettes de telle maniere que certains 
elements « coupent » I'ecran au niveau des seuils 
de scroll les plus courants. Autrement dit, volontai- 
rement, vous placez des elements qui semblent 
tronques si I'internaute ne scrolle pas. Ainsi, ces 
objets jouent le role d'indice pour signifier que la 
page a une suite. 



Pour I'ergonomie, on verra a la fin 

L'idee re^ue en quelques mots 

Trop souvent, on concoit I'ergonomie dans un projet web comme une 
composante tout a fait independante des autres metiers (design, develop- 
pement, marketing, referencement, etc.). Or il n'y a rien de plus faux ! 

Voir I'ergonomie comme une couche que Ton pourrait appliquer sur un 
site web a la fin est dangereux. Evidemment, c'est deja bien d'y penser et 
cela permet de limiter les degats. Cependant, le mieux est de considerer 
les problematiques d'ergonomie comme etant aussi importantes que le 
reste, au debut, au milieu, a la fin d'un projet web, bref, en permanence. 
L'ergonomie n'est pas une discipline ponctuelle, mais une preoccupation 
generale qui doit etre presente tout au long du projet, de maniere plus ou 
moins marquee certes, mais presente ! 

Or les habitudes de developpement web francais prennent trop peu sou- 
vent en compte cette dimension. En effet, I'ergonomie est quelque chose 
dont on a l'impression de pouvoir se passer. Selon les points de vue, elle 
est consideree comme un gadget, un luxe, un label, ou pire, une evidence 
(voir a ce propos L'ergonomie, c est juste du bon sens, precedemment dans 
ce chapitre). La question ne se pose pas pour le developpement tech- 
nique ou le design, car sans ces disciplines, le Web n'existe pas. En y 
ajoutant l'ergonomie, vous vous donnez la chance de creer un bon site, 
bien pense pour ses internautes et sur lequel ils auront envie de revenir. 
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Methodologie Pin-pon, pin-pon! 

L'ergonome, s'il est appele tel un pompier pour 
secourir un site web qui ne marche pas, ne pourra 
qu'eteindre le feu qui aura noirci les murs. Se pre- 
occuper de vos internautes des le debut vous per- 
mettra d'eviter que votre site ne prenne feu et 
vous assurera une qualite d'utilisation necessaire 
pour conquerir votre public. Dommage d'attendre 
que cela brule pour se rendre compte de I'impor- 
tance de I'ergonomie I 



II est difficile d'imposer de commencer par I'ergonomie, parce que cela 
contraint des le depart a mener une reflexion sur des problematiques de 
conception, la ou on a frequemment l'habitude de commencer par 
d'autres etapes. Le plus souvent, l'equipe part d'une possibilite tech- 
nique (« On a reussi a developper telle fonctionnalite, elle sera le cceur 
de notre nouveau produit ! ») ou d'un objectif visuel (« Nous voulons 
voir l'allure qu'aura notre site ! »). 

Ce raisonnement a l'envers est parfois meme impose par une realite 
commerciale : lors d'appels d'offres, il n'est pas rare de se voir demander 
de maquetter sous forme graphique la page d'accueil. Or comment 
mettre en forme quelque chose dont on ne connait meme pas l'organisa- 
tion en termes de contenu ? Vous devez alors necessairement conduire 
un travail conceptuel, qu'il soit en amont ou mele au travail graphique. 

Pourquoi faut-il commencer par I'ergonomie ? 

Si les questionnements sur I'ergonomie sont menes assez tot dans un 
projet, on pourra prendre des decisions tres impactantes. Ainsi, plus tot 
vous penserez aux problematiques d'ergonomie, plus vous reussirez a 
mettre en place des choix decisifs pour la qualite d'utilisation de votre site. 
C'est reellement a cet instant que vous deciderez du tournant que prendra 
votre site : soit il sera oriente vers vos internautes, soit il ne le sera pas. 

Si vous vous y prenez trop tard, vous ne pourrez probablement operer 
que des changements de surface, et encore. Vous devez bien faire la dif- 
ference entre, d'une part, l'arrangement et l'apparence des choses a 
l'ecran (ce sera l'objet du chapitre 9) et, d'autre part, la maniere dont 
elles sont organisees et fonctionnent dans le site (chapitre 8). Lorsque 
Ton pense a I'ergonomie sur la fin, il est souvent trop tard pour modifier 
l'architecture de l'information ou les grands principes d'interaction. On 
se limite done a modifier des liberies, des couleurs, des organisations 
visuelles... quand il est encore temps ! 

Travailler des le debut pour votre internaute vous permettra d'avoir en 
tete des contraintes de base tout au long du projet, et vous evitera done 
de faire des propositions qui entreraient en contradiction avec la facilite 
d'utilisation de votre site. Voyons done comment vous pouvez concevoir 
votre site en tenant compte des caracteristiques de vos internautes. 
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Deuxieme partie 



Dans la peau de votre 
internaute : 
les fondements 
de I'ergonomie 



Le secret d'une experience utilisateur reussie est simple : comprendre ses 
internautes, voila la cle. Puisque l'objectif de l'ergonomie web est d'adapter 
un site a ses utilisateurs, la premiere etape de votre travail consiste a les 
connaitre et a les definir au mieux. C'est seulement a partir de cette 
connaissance que votre reflexion pourra reellement aller vers une amelioration 
de l'ergonomie de votre site. 



chapitre 
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Comprendre I'internaute : 
d'abord un etre humain 



Un site ergonomique est avant tout un site qui se preoccupe 
de ses utilisateurs. Votre site ne pourra etre ergonomique 
que s'il repond aux besoins de ses visiteurs et les satisfait. Vous 
devez done vous mettre au travail pour comprendre qui sont 
reellement ces utilisateurs et ainsi vous adapter a leurs besoins. 
Nous allons d'abord essayer de comprendre ce qui 
les caracterise en tant qu'hommes en general, puis en tant 
qu'utilisateurs de votre site web en particulier. 
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Dans ce livre 

Vous etes ici pour comprendre ce qui 

justifie les regies d'ergonomie web 

Ce que Ton va evoquer dans ce chapitre constitue 
souvent le support theorique des regies ergonomi- 
ques que nous aborderons au chapitre 5. 



Pour vous adapter a votre internaute, vous devez d'abord connaitre et 
prendre en compte ce qui le definit en tant qu'etre humain. Chaque 
internaute qui visite un site web est en effet d'abord un homme et pre- 
sente de ce fait des caracteristiques bien precises. 

Les recherches en psychologie nous fournissent des informations fonda- 
mentales sur nos capacites dans les domaines perceptif, sensori-moteur, 
du raisonnement, de la memoire ou du langage. Ces capacites influen- 
cent le rapport qu'un internaute entretient avec un site web et permet- 
tent de formuler des regies universelles valables pour tous les sites. Ces 
recommandations doivent done etre appliquees quelle que soit l'inter- 
face qui vous concerne. 

Les criteres de l'ergonomie web prennent en compte l'ensemble des 
caracteristiques qui definissent les internautes en tant qu'etres humains. 
Ici, nous avons selectionne quelques-unes des regies universelles arm de 
vous expliquer leurs fondements theoriques. Nous avons privilegie celles 
qui sont le plus frequemment mal appliquees sur le Web, car e'est en les 
connaissant que vous pourrez reellement ameliorer l'ergonomie des sites 
web pour l'ensemble des internautes. 

Nous presenterons done dans ce chapitre de grandes lois qui condition- 
nent la presentation et le comportement des pages web. Ce sont, pour 
l'essentiel, des connaissances qui ne sont pas restreintes au Web mais qui 
y trouvent une application tout a fait eloquente. 



VOCABULAIRE 
Gestalt ? 



Le mot Gestalt est un mot allemand qui signifie 

forme. 

Attention : ne pas confondre les theories de la 

Gestalt, qui concernent nos mecanismes percep- 

tifs, avec le courant de psychologie clinique du 

meme nom. 



Decouvrez et appliquez les theories 
de la Gestalt 

Commencons par les theories de la Gestalt. Elles traitent de la maniere 
dont notre cerveau analyse le monde environnant comme un ensemble 
de formes. Cela explique d'ailleurs pourquoi on en parle aussi comme 
etant la « psychologie de la forme ». 

Developpees au debut du XX e siecle sous l'impulsion de chercheurs en 
psychologie cognitive de l'ecole de Berlin (Wertheimer, Koffka, 
Kohler), les theories de la Gestalt permettent de comprendre la maniere 
dont un internaute voit et integre mentalement une page web. Mais sur- 
tout, et par extension, elles nous fournissent un tres bon support theo- 
rique pour evaluer et concevoir des interfaces faciles a apprehender. 

Pour la theorie de la Gestalt, le tout est plus que la simple somme de ses 
parties : la conjonction de plusieurs formes peut faire emerger une nou- 
velle caracteristique, qui n'est contenue dans aucune des formes prises 
independamment. 
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Au-dela de ce modele theorique, la Gestalt nous offre des derives prati- 
ques pour evaluer et concevoir des interfaces web aptes a faciliter le tra- 
vail d'integration mentale. En effet, du point de vue perceptif, une page 
web n'est finalement qu'un ensemble de formes mises les unes a cote des 
autres, qui dessinent un tout. 

Plusieurs lois composent les theories de la Gestalt, dont deux sont parti- 
culierement pertinentes dans le domaine du Web : la loi de proximite et 
la loi de similarite. Nous avons choisi de vous presenter ces deux lois 
parce qu'elles semblent etre les plus importantes dans le domaine du 
Web, mais aussi celles qui posent le plus de problemes. D'apres notre 
experience dans le domaine de l'audit ergonomique, les principaux 
defauts de forme dont souffrent les pages web proviennent d'une mau- 
vaise application des lois de proximite et de similarite. A l'inverse, les 
sites web qui paraissent les plus simples, clairs et intuitifs au niveau de la 
presentation visuelle sont ceux qui respectent et exploitent ces regies. 
Voyons done ce qu'elles nous apprennent. 

La loi de proximite 

La loi de proximite enonce que notre cerveau tend a regrouper les choses qui 
sont proches physiquement. La proximite visuelle serait done traitee en tant 
qu'indice par notre cerveau pour prejuger d'une proximite conceptuelle. 

Autrement dit, par reflexe, on considere que deux elements qui sont pro- 
ches physiquement entretiennent des points communs, un rapport signifi- 
catif Cela implique done aussi que l'eloignement de deux objets temoigne 
d'une difference entre eux. 

Ainsi, la forme agit comme indice pour dire a notre cerveau : « Attention, si 
j'ai eloigne ces deux elements, e'est probablement qu'ils sont differents ». 
Regardez ainsi comme, dans l'exemple suivant, vous ne voyez pas un groupe 
d'objets, mais deux. Cette perception de deux groupes est essentiellement 
due a l'eloignement physique de certains elements par rapport aux autres : 




ALLER PLUS LOIN 
La notion de bonne forme 

Les theories de la Gestalt ont pour postulat que 
nous percevons tout notre environnement en 
termes de « bonne forme ». Nous sommes cons- 
tamment a la recherche de configurations percep- 
tives qui correspondraient a une sorte de modele 
que nous aurions en tete. Autrement dit, on 
recherche dans le monde ce qui viendrait s'inte- 
grer a notre moule mental. 
Ce fonctionnement cognitif est un parfait modele 
d'economie mentale, nous permettant de juger 
notre environnement tres rapidement sur la base 
d'une forme generale. 



ALLER PLUS LOIN 
Proximite, similarite, mais encore ? 

Dans cet ouvrage, nous presentons exclusivement 
la loi de proximite et la loi de similarite, mais ce ne 
sont pas les seules qui peuvent vous aider. Si vous 
souhaitez approfondir le sujet, considerez done la 
loi de distinction figure-fond, la loi de continuity 
visuelle et celle du point focal. 
En bonus, essayez d'analyser le fondement theo- 
rique du point focal en relation avec le concept - 
tres a la mode - de Call to action des freres 
Eisenberg. 



Point de vue 

La proximite est percue 

comme etant une traduction 

d'un rapport conceptuel 

II faut bien comprendre que la regie de proximite 
est Nee a un reflexe mental de bas niveau permet- 
tant a notre cerveau de comprendre les formes 
percues : au vu de la distance qui separe deux ele- 
ments, il va traduire ce que cela represente sur le 
plan de la signification. 



Figure 3-1 

La loi de proximite fait 

que Ton percpit deux groupes d'objets 
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Lorsqu'on lit cette regie, elle nous parait logique et evidente. Or de nom- 
breux defauts d'organisation de pages sur le Web peuvent s'expliquer par 
une mauvaise application de la loi de proximite. Ainsi, on voit tees souvent 
des pages organisees de telle maniere qu'elles ne traduisent pas (ou mal) 
les rapports conceptuels entre leurs differents elements constitutifs. Appli- 
quer la loi de proximite ne doit done pas etre si naturel que cela ! 

Or son interet pour optimiser la presentation d'une page web est evi- 
dent. En effet, la forme d'une page ou des objets a l'ecran est traitee 
comme autant d'indices par le cerveau des internautes. Autrement dit, 
sur le Web, plus on rapproche l'emplacement a l'ecran des elements 
d'interface, plus on semble dire qu'ils entretiennent un point commun. 
On utilise done un moyen physique pour signifier aux internautes : 
« Voici deux elements qui ont quelque chose a voir l'un avec l'autre ». 
Vous devez alors envisager l'application de la loi de proximite selon un 
double mouvement. D'une part, vous devez rapprocher les objets qui 
entretiennent effectivement un rapport fonctionnel. D'autre part, vous 
devez eloigner ceux qui n'ont rien en commun. 

RECOMMANDATION La Gestalt aux niveaux macroscopique et microscopique 

Vous devez penser a appliquer les lois de la Gestalt aussi bien au niveau de 
la page web dans sa globalite qu'au niveau des zones plus precises de cette 
page. Ainsi, on peut dire que la Gestalt est importante tant sur le plan de la 
forme generale (quelle impression globale I'internaute a-t-il lorsqu'il arrive 
sur la page ?) que sur celui des micro-formes (est-ce que les lois de la Gestalt 
sont appliquees dans les sous-niveaux d'organisation de la page ?). 



Voyons done d'abord comment la loi de proximite doit etre appliquee au 
niveau d'une page. Lorsqu'une page souffre de problemes de proximite, 
e'est souvent parce qu'un manque d'espace, de respiration entre les 
groupes d'informations a l'ecran ne permet pas de voir ces informations 
comme des groupes distincts. Ainsi, on voit un amas de choses sans pou- 
voir discerner de veritables zones d'informations. Or ce discernement est 
essentiel pour que les internautes comprennent rapidement ce que vous 
leur proposez. II permet de leur macher le travail d'analyse visuelle de la 
page. Ainsi, un site qui utilise l'eloignement physique des blocs d'infor- 
mations grace a des espaces vierges parait plus facile a prendre en main 
que celui qui ne semble etre qu'un tas indifferencie d'objets. 

En outre, vous devez appliquer la loi de proximite au niveau du detail 
des zones de cette page. C'est ce que Ton appelle les micro-applications 
de la loi de proximite. Etudiez ainsi l'exemple suivant, tire du site de 
Voyages-Sncf : le principe d'organisation visuelle adopte pour presenter 
les moyens de paiement et les boutons radio associes force a reflechir : 
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Selectionnez la carte de paiement de votre choix 

.-.-;..■ 



O 



o 



VISA 



o 



H 



e 



o 



o 



Figure 3-2 

Un manque de prise en compte de la loi de proximite complique 
la mise en relation mentale des visuels de cartes bancaires avec 
les boutons radio correspondants. 
Source : www.voyages-sncf.com 



Sur quel bouton radio devez-vous cliquer pour choisir la carte Eurocard- 
Mastercard ? Pour repondre a cette question, il faut partir du fait que le 
premier objet de la ligne est un bouton radio, pour en deduire la suite et 
faire la correspondance mentale entre les boutons radio et les visuels de 
cartes. Meme si cette reflexion ne passe pas le seuil de la conscience et 
nest pas vecue comme contraignante par les internautes, elle Test evi- 
demment plus que si le choix etait naturel. 

Revenons a notre loi de proximite. Que se passerait-il si Ton eloignait les 
visuels et les boutons radio qui ne sont pas en rapport, en ajoutant des 
espaces blancs ? Immediatement, l'interface gagnerait en intuitivite. 
Bien entendu, cette correction ne viendrait que resoudre un probleme 
d'organisation visuelle non optimale. Notamment, les boutons radio 
pourraient etre presentes au-dessus ou en dessous des visuels des cartes. 
Cependant, si les concepteurs ont choisi cette organisation en ligne, c'est 
sans doute quelle a l'avantage de gagner de la place en hauteur. L'appli- 
cation de la loi de proximite (et de son corollaire d'eloignement) permet- 
trait de conserver ce principe de presentation sous forme de ligne, tout 
en optimisant son utilisabilite. 

Notez en outre sur cet exemple que l'application de principes techniques 
rigides vient mettre en defaut la loi de proximite. Ainsi, vous voyez que 
le bouton radio lie a la carte Cofinoga est plus proche du visuel Euro- 
card-Mastercard que du visuel Cofinoga. Ceci provient de la forme 
carree du visuel Cofinoga qui vient perturber un ensemble cense etre 
equilibre et donne une interface contre-intuitive. 

Le meme type de defaut se retrouve sur le site d'Interflora. Sur ce dernier, lors 
de l'etape de commande, l'internaute peut choisir le moment de la journee 
auquel il souhaite se faire livrer. Or, si Ton n' analyse pas en detail cette 
page, la premiere impression est que le bouton radio coche par defaut est 
Apres-midi. En fait, il s'agit de celui correspondant a la journee entiere. 
Ici, comme dans l'exemple de Voyages-Sncf, un defaut d'organisation 
visuelle a pour consequence une comprehension erronee de l'interface 
(voir figure 3-4, page suivante). 

Prenons un dernier exemple de micro-application de la loi de proximite 
sur le site de Mk2 VoD ( Video on Demand). Nous allons etudier l'inter- 
face initiale et la maniere dont les responsables du site l'ont corrigee. 
Commencons par l'ancienne version du site. Dans la page de liste de 
films par genre, on ne sait pas tres bien si le lien Ajouter a mes favoris 
s'applique au film du haut ou a celui du bas (figure 3-3). 



E 

3 
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Figure 3-3 Du fait d'une mauvaise applica- 
tion de la loi de proximite, il est difficile de 
savoir si le lien Ajouter a mes favoris conceme 
le film Serpico ou Revelations. 
Source : ancien site www.mk2vod.com 
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CHOISISSEZ 

VOTRE MONTANT-> 

(Les fwa'ts de livraison sont 

rnclns) 



LOCALITE DE LIVRAI50N-> 



DATE DE LIVRAISON 
selectfonrtez une date-> 



MOMENT DE LIVRAISON -> 



INFORMATIONS 
COMPLEM ENTAI RES-> 



Pour une livraison en 

FRANCE metropolitaine 

O 48 € 

® 56€(cfvisuelJ 

C'66€ 

© Au choix : | 

{entre48€et94€> 



Ce produit n'es: pas livrable 
dans les DOM -TOM 



Ville* : 

Livraisnn sur Is lieu de travail* : ID r>ui Dnn 



YerdredJMt 
■ = "=- ITS 

dnvarcSeOlrtE 



{Les dates proposees ci-contre dement compte du delai 
dau rrvoins 4B heures pour fe livraison de cette oreator 
issue de la collection "les Interfbrales".} 



© MA™[jusqu'a13H)0 APRESHDI® JOURHEE 



JJ Je souhaite choisir le fleuriste qui effectuera ma livraBon parmi la lists ci-apres en cochant 
la case. Dans le cas inverse Interflora chnsira le fleurstequi executera mon bouquet 



champs obligatoires 



« Precedent 



( ^Huca 



Figure 3-4 Un manque de prise en compte 

de la loi de proximite complique la mise en relation mentale 

des labels avec les boutons radio correspondants. 

Source : www.interflora.fr 




Figure 3-5 Grace a une meilleure application de 

la loi de proximite, il est tres facile de savoir que 

le premier lien Ajouter a mes favoris conceme le 

film Genealogies d'un crime. 

Source : ancien site www.mk2vod.com 



Faites le test autour de vous et vous observerez l'heterogeneite des avis 
parmi vos proches. D'ailleurs, raccrochez-vous toujours a ce constat : 
une page bien concue en termes de Gestalt fait toujours l'unanimite. 

En realite, le lien Ajouter a mes favoris s'applique a l'objet du haut, 
e'est-a-dire, de maniere tout a fait contre-intuitive, a l'objet dont il est le 
plus eloigne. Ainsi, si vous cliquez sur le lien situe au-dessus de Fafnche 
de Serpico, ce n'est pas Serpico que vous allez ajouter a vos favoris, mais 
Revelations. Ce defaut est encore accentue par le feedback d'ajout aux 
favoris, qui ne mentionne aucunement le nom du film. Faisant confiance 
au site, vous pouvez ainsi ajouter une dizaine de films a vos favoris avant 
de realiser votre erreur (ou plutot l'erreur du site...). Un exemple assez 
criant des effets tres dommageables que peut creer une legere deviation 
des lois de la Gestalt. 

Dans la nouvelle version du site Mk2 VoD, de nouveaux principes d'organi- 
sation visuelle permettent de rapprocher le lien Ajouter a mes favoris du film 
auquel il correspond. Ainsi, l'interface redevient plus utilisable (figure 3-5). 
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Figure 3-6 Du fait d'une mauvaise application 
de la loi de proximite, il est difficile de savoir 
si le lien Ajoutera ma liste concerne le produit situe 
au-dessus ou celui situe juste en-dessous. 
Source : www.leroymerlin.fr 



On peut remarquer un defaut strictement identique a l'ancienne version 
du site Mk2 VoD sur le site de Leroy Merlin. Dans cet exemple, il s'agit 
d'une ambiguite portant sur le modele de seche serviettes qui est ajoute a 
la liste lorsque l'internaute clique sur un lien Ajouter d ma liste (figure 3-6). 

Dans certains cas, les defauts lies a la loi de proximite peuvent etre com- 
penses en prevoyant des etats specifiques au survol de la souris. Par 
exemple, sur le site de Calipage, le survol d'un bloc-produit dessine, 
autour de l'ensemble de ce bloc, bouton d'action compris, une zone tres 
claire. Ceci est un bon moyen de compenser une interface defaillante et 
d'eviter toute erreur de la part des utilisateurs (figure 3-7). 
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Figure 3-7 L'espace trap important entre le descriptif du 
produit et le bouton Plus d'infos est en partie resolu lors 
du survol du bloc produit, mettant en relation ces deux 
parties de la page. 
Source : www.calipage.fr 
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Les defauts que nous venons devoquer sont extremement frequents sur les 
sites web alors que, souvent, la bonne forme n'est pas si loin. Decaler les 
objets de quelques pixels a l'ecran peut ainsi avoir des resultats inesperes sur 
la perception visuelle de la page. Souvent, il ne manque pas grand chose 
pour que votre site, en exploitant la loi de proximite, devienne plus utilisable. 

Passons done a la loi de similarite et voyons comment elle peut, elle aussi, nous 
aider a concevoir des interfaces qui semblent plus evidentes a nos visiteurs. 

La loi de similarite 

La loi de similarite (ou de similitude) enonce que notre cerveau a ten- 
dance a regrouper les choses qui se ressemblent. Une ressemblance ou 
une difference de forme sera done le signe que les objets sont compara- 
bles ou opposables d'un point de vue conceptuel. Differents attributs 
visuels peuvent nourrir la similarite de deux elements, notamment la 
taille, la forme, la couleur, le contenu et le comportement. 

Observez chacun des exemples ci-apres : voyez comme vous discernez, 
non pas un ensemble unique de formes, mais deux groupes d'elements. 





Figure 3-8 La loi de similarite par la taille 
fait que Ton permit deux types d'objets. 




Figure 3-9 La loi de similarite par la forme 
fait que Ton permit deux types d'objets. 



Figure 3-10 

La loi de similarite par la couleur fait que Ton 
percoit deux types d'objets. 
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L' application des lois de la Gestalt peut s'averer indispensable pour faci- 
liter la comprehension generate d'une page. Elle peut aussi ameliorer de 
maniere tres fine son utilisabilite. Vous pouvez notamment utiliser les 
lois de la Gestalt pour rendre les formats survoles plus significatifs. 

Voyez par exemple comme le site d'Apple utilise la loi de similarite par 
la couleur pour mettre en relation le survol d'un des boutons Choisir avec 
le produit associe : non seulement le bouton change de format au survol 
de la souris, mais ce format adopte la couleur de 1'iPod correspondant. 
C'est grace a ce genre de details qu'une interface semble rapide, intuitive 
et simple a utiliser. 
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Figure 3-11 

Lorsqu'on survole le bouton Choisir 
correspondant a I'iPod rose, le bouton 
devient rose (gris sur notre image). 
Suivant le meme principe, lorsqu'on 
survole le bouton Choisir correspondant a 
I'iPod noir, le bouton devient noir. 
Source : www.apple.fr 



47 



E 



A SAVOIR 
L'histoire de la loi de Fitts 

La loi de Fitts a ete proposee par Paul Fitts en 1 954 
sur la base a" experimentations dans le domaine 
psychomoteur, avec I'objectif d'ameliorer I'ergo- 
nomie des cockpits d'avion. 



VOCABULAIRE 
Do you fittsize? 



Le Fittsizing, c'est I'application de la loi de Fitts 
dans une interface. 

Dans un sens restrictif, elle concerne uniquement 
la compensation de la distance vers un element 
par I'augmentation de sa taille. 
Plus largement, lorsqu'on « fittsize » une inter- 
face, c'est que Ton concoit les objets qui la compo- 
sent en prenant en compte la loi de Fitts. 



Decouvrez et appliquez la loi de Fitts 

Le temps que Ton met pour atteindre une cible est proportionnel a la 
distance a laquelle elle se trouve, ainsi qua sa taille. Plus precisement, 
une cible est d'autant plus rapide a atteindre quelle est proche et grande. 
Cette regie constitue ce que Ton appelle la loi de Fitts. 

Si on applique ce principe sur le Web, il signifie que vous devez essayer 
d'augmenter la taille des elements cliquables et de reduire leur eloigne- 
ment vis-a-vis du point de depart du mouvement. 

II est primordial de tenir compte du fait que ces deux recommandations 
peuvent se compenser l'une 1' autre. Par exemple, plus un element 
d'interface est situe loin du pointeur de souris (on peut prendre 
l'exemple d'une barre de navigation lorsque l'internaute se trouve en 
train de lire l'interieur d'une page), plus il sera important de lui donner 
une taille respectable. 

De plus, la loi de Fitts doit etre appliquee de maniere hierarchisee, en 
fonction de l'importance respective des differents elements cliquables. 
Le Web fait appel a differents types d'objets cliquables, qui sont done 
soumis a cette loi de Fitts : logos, barres de navigation, icones, images, 
bullet points, boutons, liens hypertextes... L'importance que vous devez 
accorder a faciliter la cliquabilite de ces elements decoule principalement 
de leur frequence d'utilisation supposee. Ainsi, il est beaucoup plus 
important d'optimiser la cliquabilite des elements de navigation princi- 
paux que celle d'un lien hypertexte isole au sein du contenu. 

Vous choisirez d'appliquer ce que Ton appelle le Fittsizing en fonction 
de ces niveaux d'importance relative et de la possibilite de compenser 
l'eloignement par la taille. Notez d'ailleurs que nous distinguons ces 
deux dimensions pour des besoins pedagogiques mais que, dans la for- 
mule mathematique de base, elles entrent en interaction de maniere 
assez complexe. Pour vous en donner un apercu, la formule de la loi de 
Fitts ressemble a ceci : 

F , ,-t h m"?p« 2 T=a + blog 2 (R + i) 

Formule complete de la loi de Fitts. r 



Rassurez-vous, vous n'avez pas besoin de la comprendre pour appliquer 
les principes de cette loi sur le Web ! 
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Les elements cliquables doivent etre gros 

La premiere partie de la loi de Fitts nous amene a recommander l'agran- 
dissement de certains elements afin que Ton puisse cliquer dessus le plus 
rapidement possible : 



« Une cible est d'autant plus rapide a 
atteindre qu'elle estproche etgrande. » 



Figure 3-13 

Mise en valeur de la partie « taille de la cible 
de la loi de Fitts. 
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Figure 3-14 

Dans I'absolu (c'est-a-dire sans aucune notion de distance), 
le bouton de droite est plus facilement et plus rapidement 
cliquable que celui de gauche, car il est plus grand. 



Faciliter le clic des elements, c'est augmenter la vitesse avec laquelle on 
peut cliquer dessus. Moins l'internaute a besoin d'effectuer un mouve- 
ment precis en termes de pixels, plus il pourra aller vite dans sa visee. 

En augmentant la taille des elements cliquables, on reduit le nombre 
d'erreurs de type « Je clique a cote de ce qui m'interesse, done je suis 
oblige de cliquer une nouvelle fois pour atteindre ma cible ». II faut 
savoir que ce type de comportement passe souvent inapercu aux yeux de 
l'internaute : nous sommes tenement habitues a corriger nos erreurs que, 
lorsque nous engageons une action de correction mineure, cette derniere 
franchit a peine le seuil de Faction consciente. De fait, bien que l'inter- 
naute n'ait pas l'impression d'avoir fait une erreur, c'est bien le terme que 
Ton utilisera en ergonomie : il doit en effet reiterer un mouvement pour 
atteindre un objectif qu'il a rate une premiere fois. 

Lorsqu'on augmente la taille des elements cliquables, on limite aussi les 
sous-mouvements correctifs dun premier mouvement approximatif : 
l'internaute n'a pas encore clique mais, en termes ergonomiques, il a deja 
fait une erreur, puisque le pointeur de sa souris n'est pas arrive exactement 
la ou ses yeux avaient repere la cible. 

Plusieurs approches vous permettront de concevoir des elements cliquables 
plus gros. Passons-les en revue. 



VOCABULAIRE Chapitre 3 : 
facile ou rapide, meme combat 

Dans ce chapitre evoquant I'application de la loi de 
Fitts pour le Web, nous utiliserons de maniere indif- 
ferenciee les termes de facile et de rapide, meme si 
I'expression initiale de la loi de Fitts parle bien de 
rapidite. Notez que cela ne signifie pas que ces con- 
cepts sont interchangeables de maniere generale. 



Augmenter la taille reelle des elements cliquables 

La premiere maniere d'augmenter la taille des elements cliquables, c'est 
naturellement d'augmenter leur taille reelle. Autrement dit, pour les ele- 
ments les plus importants, voyez toujours un peu plus grand que ce que 
vous dicte votre intuition : si, par exemple, vous avez concu une barre de 
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navigation de 15 pixels de haut, forcez-vous a pousser jusqu'a 20, voire 
davantage suivant les contraintes de votre page. 

Cet objectif peut en outre vous amener a revoir la nature meme de vos 
objets cliquables. Prenons un exemple de presentation d'une liste de 
resultats paginee. Si je me trouve sur la premiere page et que je souhaite 
passer a la suivante, je peux en general proceder en cliquant sur un 
lien 2, mais aussi sur un objet signifiant « page suivante ». Cet objet peut 
etre, soit un element typographique ou graphique sous forme de fleche 
orientee vers la droite, soit un lien hypertexte. C'est ce dernier format 
qu'il faut privilegier, en partie parce que, etant de taille plus importante 
qu'une fleche, il est plus facile a cliquer. Regardez done comme cela 
parait evident lorsque Ton compare deux interfaces qui utilisent des for- 
mats de presentation differents : 



Figure 3-15 

D'apres la loi de Fitts, il est plus facile de passer a la page 2 

sur le site de Google en cliquant sur le lien Suivant, que sur 

le site de Pimkie en cliquant sur la fleche. 

Sources : www.google.fr/www.pimkie-shop.com 



Goooooooooogle ► 



Page de resultats: 1 2345678910 Suivant 



Pages de resiiltat: B 2 3 4 5 







C'est aussi l'une des reflexions justifiant que les liens hypertextes soient 
constitues par des libelles significatifs de quelques mots plutot que par 
des libelles generiques. Et ce d'autant plus que ces derniers sont de taille 
reduite. Comparez ainsi la facilite a cliquer dans les trois exemples sui- 
vants (plus le lien est grand, plus il est facile a cliquer) : 



Figure 3-16 

D'apres la loi de Fitts, c'est le lien 

consultez notre menu qui est 

le plus facilement cliquable, parce que 

c'est le plus grand de tous. 



Pour consulter notre menu, cliquei ici 
Pour consulter notre menu, cliquez ici 
Pour vous mettre I'eau a la nouche, consultez notre menu 



Cependant, augmenter la taille reelle de vos elements cliquables n'est pas 
la seule maniere de les rendre plus gros. Voyons done une autre methode 
possible. 

Augmenter la taille virtuelle des elements cliquables 

La seconde maniere d'augmenter la taille de vos elements cliquables, 
c'est d'augmenter leur taille virtuelle. Mais de quoi parle-t-on ? Vous 
allez voir que c'est, somme toute, tees simple. 
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Augmenter la surface cliquable des elements cliquables 



Ce type de precede consiste a augmenter virtuellement la taille des 
elements : ce ne sont pas eux qui intrinsequement sont plus grands ; on 
se sert, en revanche, des elements qui leur sont directement adjacents 
pour augmenter la surface cliquable. Ainsi, on optimise la cliquabilite. 

Deux techniques permettent d'augmenter la surface active d'un element 
explicitement cliquable. Vous pouvez d'abord profiter des elements 
signifiants qui accompagnent celui-ci et leur etendre cette propriete de 
cliquabilite. Par exemple, il est recommande qu'un internaute puisse cli- 
quer aussi bien sur le libelle d'une case a cocher que sur la case elle- 
meme, ann d'optimiser la cliquabilite de cette interface de selection. 
C'est par exemple le cas sur cette page du site de la SNCF : 
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I I En cochant cette case, je reconnais avoir pris connaissance des Conditions Generales de 
Vente SNCF ainsi que des Conditions Generales de Vente et d'Utilisation du si:e 
vo'.'ades-sncf.com , et je les accepte. 



Figure 3-17 Pour cocher la case et ainsi reconnaitre qu'il accepte les CGV du site, 

I'internaute peut cliquer aussi bien sur la case a cocher que sur toute la phrase 

En cochant cette case, je [...] etje les accepte. 

Source : www.voyages-sncf.fr 



La seconde technique consiste a augmenter la surface cliquable autour 
de 1' element, c'est-a-dire a exploiter l'espace vide autour de cet element 
en le rendant actif. Voyez ci-dessous comme le bouton de droite est 
beaucoup plus facile a cliquer que celui de gauche : il utilise une large 
bordure autour du libelle : 



Figure 3-18 

Le bouton de droite prend mieux en compte 
la loi de Fitts que le bouton de gauche, puis- 
que sa surface cliquable va au-dela des 
simples caracteres textuels. 



Cette premiere recommandation est critique lorsque 1' amplitude de cli- 
quabilite est suggeree par le design sans exister techniquement. C'est 
souvent le cas lorsque les libelles des boutons sont ecrits en html sur une 
image representant un bouton et servant de fond. Je sens bien que vous 
vous dites : « Oui d'accord mais on est un peu intelligent quand 
meme... ». Erreur ! (Enfin, cela n'a rien a voir avec votre intelligence). 
Surveillez attentivement tous les boutons de votre site, parce que ce type 
de defaut arrive beaucoup, beaucoup plus souvent qu'on ne le croit. 
Regardez ainsi ces deux exemples sur le site de la Fnac et celui du Credit 



Recommandation Un element vide 
ne peut pas etre cliquable : oubliez. 

Apres avoir expose la regie d'augmentation de la 
taille virtuelle des elements par agrandissement de 
la surface cliquable, attendez-vous a des objec- 
tions du type : « Oui mais non, tu comprends, je ne 
peux pas faire ca parce que, semantiquement par- 
lant, une zone vide ne peut pas etre cliquable, 
puisque justement elle est vide ». 
Debrouillez-vous avec votre karma, mais faites en 
sorte que Ton puisse cliquer sur une zone vide de 
sens sans que cela ne soit problematique. Revenez 
toujours a I'essentiel : pourquoi fait-on des sites 
Internet, si ce n'est pour ses internautes ? II est 
quand meme assez facile de faire la balance entre 
le confort des utilisateurs et I'application stride de 
regies techniques permettant d'obtenir un code 
pur et elegant. 



51 



E 



Agricole. Dans ces deux boutons, seul le libelle textuel est cliquable, et 
non l'ensemble de ce qui ressemble a bouton : 



Figure 3-19 

Dans ces deux exemples, cliquer sur une zone 

exterieure au texte n'aura aucun effet. 

Sources : www.fnac.com / www.ca-atlantique-vendee.fr 



Voirtous les resultats en livres 



Le meme type d'erreur peut etre observe sur les fiches produit du cata- 
logue en ligne de Lyreco. Sur ces pages, on propose a l'internaute une 
fonction pour acceder a des produits equivalents a celui qu'il est en train 
de regarder. II peut ainsi cliquer sur une fleche arriere ou une fleche 
avant pour consulter l'un de ces articles comparables. Or, ces deux fle- 
ches sont elles-memes integrees a ce qui a tout Fair d'un bouton libelle 
Produits similaires : 



Figure 3-20 Cliquer sur le libelle 

Produits similaires n'aura aucun 

effet alors qu'il semble etre le titre 

du bouton. En fait, seules les deux 

fleches sont cliquables et menent a 

deux endroits distincts du site. 

Source : www.lyreco.com 
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Resultat : on essaie de cliquer sur ce libelle, pensant etre dirige vers une 
liste d'articles comparables, mais rien ne se passe. Notons que ce defaut 
est double d'un choix de terminologie discutable. En effet, tout ce que 
propose cette fonction, e'est de passer directement aux articles precedent 
et suivant de la liste de resultats. 

En plus de satisfaire la loi de Fitts, augmenter la surface cliquable des 
elements permet de prendre en compte d'autres comportements des 
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internautes. Elle permet notamment d'inclure une marge d'erreur : grace <s 

a l'application de cette regie, votre interface sera moins sensible aux clics = 

« a cote ». % 

i 
Anecdote C'est pas des blagues, on clique vraiment a cote de la plaque 1 

■»-• 

c 

II va falloir vous y faire, les internautes ne visent pas tres precisement les — 

elements sur lesquels ils veulent cliquer. Regardez ainsi ces quelques -| 

exemples sur le site de Reservoir Jeux, analyses grace a I'outil ClickDensity §, 

(que nous reutiliserons au chapitre suivant). Les taches que vous observez, I 

ce sont les endroits les plus cliques par les internautes. On ne peut pas i 

dire que la precision soit leur preoccupation premiere ! m 

I leujtffc Soiiete ,. Echers. Poker t cie Jeux □ Eoltectionner ,, Jbux . e nJles j, Figuri ies . 



To us les pro Quits 



Figure 3-21 

Zones les plus cliquees sur deux espaces du site de Reservoir Jeux. II est frequent 

de constater que lorsque les internautes cliquent sur un bouton, non seulement ils ne 

cliquent pas toujours directement sur le libelle textuel, mais aussi a cote. 

Sources : www.reservoir-jeux.com / www.clickdensity.com 

Pour voir cette illustration en couleurs, rendez-vous sur le site compa- 

gnon du livre ! 

► http://www.ergonomie-sites-web.com 



Regardez ainsi comme il est important d'aller au-dela de la stricte bor- 
dure des elements signifiants : Knight Frank est une agence immobiliere 
dont les pourtours du logo sont tres bien definis, puisque c'est un rec- 
tangle parfait. Or, il est important de prevoir que les internautes puissent 
cliquer un peu a cote du logo ; sinon, s'ils n'ont pas ete tres precis, ils 
devront cliquer une seconde fois. Cependant, sur le site de l'agence, la 
surface cliquable du logo est limitee au pourtour de l'image, c'est-a-dire 
strictement a la forme rectangulaire : 

Figure 3-22 
Knight f w Knight f La zone c | iqua b| e du logo Knight Frank doit 



b 



etre etendue au-dela du strict rectangle. 
Source : www.knightfrank.fr 



En outre, augmenter la taille virtuelle permet de profiter de la deviation 
d'une strategic initiale lorsque celle-ci est confrontee a une interface qui 
la devance : si l'internaute voit son pointeur en forme de fleche se trans- 
former en une main a proximite de l'element sur lequel il voulait cliquer, 
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il sait qu'il peut stopper son mouvement et cliquer. Son clic activera alors 
1' element en question, meme si le pointeur ne se trouve pas strictement 
dessus mais plutot autour. 

Augmenter la distance entre les elements cliquables 

Un deuxieme type d'approche peut vous permettre d'augmenter la taille 
virtuelle de vos elements cliquables, particulierement dans les espaces de 
navigation ou plusieurs elements actifs sont places les uns a cote des autres. 

Pour augmenter leur taille virtuelle, prevoyez une zone de buffer entre 
deux elements cliquables, c'est-a-dire un vide, un espace neutre ou une 
erreur de clic n'aura aucun impact en termes de navigation. 

Cette recommandation est justifiee par le fait qu'une erreur de clic sur un 
element neutre est moins grave qu'une erreur de clic sur un element actif 
(qui enverrait alors l'internaute sur une autre page que celle souhaitee). 
Ce dernier devra done revenir sur la premiere page et recommencer son 
action en veillant a ne pas se tromper. En revanche, si votre internaute 
n'a pas peur de se tromper parce qu'il voit les espaces vides prevus dans 
l'interface (bien sur, de maniere inconsciente), il pourra aller plus vite. 

Observez done, avec cette recommandation en tete, comme on pourrait 
optimiser cette page du site de Zadig & Voltaire ou deux boutons 
d'action sont litteralement colles Fun a l'autre : 



Figure 3-23 Aucune zone neutre 

n'est prevue entre les boutons 

Continuer mon shopping et Finaliser ma commande. 

Source : www.zadig-et-voltaire.com 



Meme type d'exemple sur le site de SmartBox, ou il faut viser avec pre- 
cision pour etre certain de cliquer sur le bouton desire : 



Figure 3-24 Aucune zone neutre n'est prevue 

entre les boutons Plus d'info et Commander. 

Source : www.smartbox.com 
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Integrer une zone neutre entre deux elements cliquables permet aussi de 
pouvoir se passer d'un etat survole pour chacun de ces objets. Si le poin- 
teur change de forme entre deux elements cliquables, il est plus facile de 
comprendre quel element on survole. 



A l'inverse, si vous ne prevoyez pas de zone de buffer, le format gra- 
phique survole a beaucoup plus d'importance. En effet, on considerera 
plus facilement la zone proche de l'element explicitement cliquable 
comme appartenant a ce dernier, des lors que le format adopte pour 
l'etat « survole » les mettra en correspondance. Regardez l'illustration 
suivante : a gauche, certes, mon pointeur a la forme d'une main, mais 
pouvez-vous me preciser l'element que je survole ? II est difficile de le 
savoir meme lorsqu'on manie la souris, parce qu'il n'y a pas de zone vide 
entre ces elements ; il n'existe pas non plus de format survole prevu pour 
chacun des elements. A l'inverse, a droite, l'adoption d'un format speci- 
fique « reliant » le mot et la surface cliquable autour de ce mot permet de 
s'assurer d'une bonne discrimination mentale entre les deux elements : 
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mtm 



ran 



Figure 3-25 

L'adoption d'un format specifique au survol de la souris permet 
de compenser le manque de distance entre les deux boutons. 
Source : www.zadig-et-voltaire.com 



Les elements cliquables doivent etre proches 

La seconde partie de la loi de Fitts concerne la proximite geographique 
des objets : plus l'objet cible est proche de l'objet source, plus on l'atteindra 
rapidement. 



« Une cible est d'autant plus rapide a 
atteindre qu'elle est proche etgrande. » 



Figure 3-26 

Mise en valeur de la partie « distance a la cible » de la loi de Fitts. 



II est plus difficile d'appliquer ce principe sur le Web, dans la mesure ou 
de nombreux emplacements sont conventionnels. La plupart du temps, 
il est plus important de respecter une convention que d'obeir a tout prix 
a la loi de Fitts. 

Ce principe est egalement difficile a appliquer car on ne peut prejuger de 
l'endroit ou se trouve la souris de votre internaute, sauf lorsque le modele 
d'interaction est assez precis. Cela concerne done plus specifiquement 
les interfaces transactionnelles que la navigation simple. Par exemple, il 
est logique de placer un bouton a la fin d'un formulaire puisque celui-ci 
sera actionne lorsque l'internaute aura rempli le dernier champ. 
Pour profiter encore de cette proximite du pointeur de la souris, on 
recommande de grouper les elements susceptibles d'etre utilises simulta- 
nement ou successivement. 

En fait, la regie generate pour beneficier de la partie « distance » de la loi 
de Fitts consiste a adapter votre interface en fonction de sa logique 
d'utilisation par les internautes. Ainsi, si vous avez prevu de placer de 
maniere permanente une barre de boutons d'actions en haut de l'ecran, 



Dans ce livre 

Loi de Fitts versus Conventions : 

e'est ma droite qui cjacjne ! 

Au chapitre 5, nous evoquerons en detail pourquoi 
vous devez absolument tenir compte des conven- 
tions de localisation pour les elements de naviga- 
tion. Cette recommandation est plus importante 
que I'application de la partie « distance » de la loi 
de Fitts. 
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Anecdote Les 5 lieux sacres d'un ecran 




Figure 3-27 Les 5 endroits les plus facilement 
cliquables d'un ecran. 



Sur le Web, le fait qu'il soit facile ou difficile de cliquer sur un objet 
ne depend pas strictement de la mesure arithmetique de la taille et 
de la distance. 

Ainsi, sur un ecran, les 5 points les plus faciles a atteindre sont 
d'une part, le point de depart (c'est-a-dire I'endroit exact ou se 
situe le pointeur de la souris) et, d'autre part, les 4 coins de I'ecran. 
Seul le point de depart tient compte de la notion de distance. Les 4 
autres exploitent plutot la notion etendue de taille, puisqu'on peut 
considerer qu'ils sont immensement grands et done tres facilement 
cliquables. On les considere ainsi parce qu'ils s'etendent a I'infini. 
Faites-en I'experience : lorsque votre pointeur s'approche du bord 
de I'ecran, il ne rebondit pas vers le centre. 

Les 4 coins de I'ecran beneficient done de la butee qui se produit 
sur chacun des bords de I'ecran pour le pointeur de souris. Les coins 
d'un ecran sont de ce point de vue un lieu de predilection pour le 
die puisqu'ils permettent de lancer la souris sans requerir une 
grande precision de visee. 

Notez qu'il existe encore une hierarchie de facilite de clic entre les 
4 coins d'un ecran suivant que vous etes droitier ou gaucher. 



prevoyez aussi de les fournir de maniere contextuelle aux endroits ou les 
internautes peuvent en avoir besoin, ainsi qu'en bas de page. 

Dans ce contexte, attention aux interfaces elastiques, qui s'etirent en lar- 
geur selon l'espace disponible a I'ecran. En effet, ce precede peut donner 
des interfaces tout a fait inadaptees si Ton considere la loi de Fitts. Voyez 
a ce propos comment, lorsque le site de Telemarket est affiche sur un 
ecran large, il peut etre difficile de passer du bouton Ajouter a la colonne 
de navigation a gauche permettant de changer de rayon : 
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Figure 3-28 Une fois que j'ai clique sur le bouton Ajouter, la distance a parcourir avec la souris pour changer de sous-rayon 
est tres elevee, du fait d'une interface etiree en largeur. Source : www.telemarket.fr 
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Notez que l'eloignement a l'ecran lie a ce type de defaut entraine en 
general des difficultes de mise en relation mentale entre 1' element concerne 
(ici : la confiture de fraise) et le bouton d'action correspondant. 

Un dernier point permet d'appliquer la partie « distance » de la loi de 
Fitts. Elle consiste a exploiter la notion de proximite immediate. Ce que 
Ton designe par ce terme, c'est l'endroit ou se trouve la souris a un ins- 
tant t. Elle constitue le principe sous-jacent a deux modes d'interaction 
avances, c'est-a-dire plutot utilises par des utilisateurs experimentes : 

• D'une part le raccourci clavier : en croisant les modes d'interaction, 
on peut optimiser l'efficience des utilisateurs (on leur permet ici 
d'utiliser indifferemment la souris ou le clavier). Si on revient a la loi 
de Fitts, on peut ainsi dire en exagerant qu'un element est plus facile- 
ment cliquable si l'internaute n'a meme pas besoin de le cliquer pour 
l'activer. 

• D'autre part le clic droit, qui permet d'afficher un menu contextuel 
en fonction de l'endroit ou Ton se trouve (figure 3-29). Dans ce cas, 
on ne peut pas faire plus proche ! 
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Figure 3-29 

Les fonctions accessibles par clic droit sont a 
proximite immediate du pointeur de la souris. 
Sources : ancien site www.fluctuat.net 



Notez que ces deux principes lies a la proximite immediate sont beau- 
coup plus largement utilises dans les interfaces applicatives, type outils 
ou metiers, que dans les sites Internet classiques. L'on vient ainsi d'en 
finir avec les applications web derivees de la loi de Fitts. Passons done 
maintenant a la notion d'affordance. 
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VOCABULAIRE 

Historique et acceptions 

du mot Affordance 



La notion d'affordance a ete inventee par James J. 
Gibson a la fin des annees 70, dans le cadre de 
recherches en psychologie cognitive (plus particu- 
lierement dans le domaine de la perception 
visuelle). 

Le terme est repris en 1988 par Donald Norman 
dans son fameux livre The Psychology Of Eve- 
ryday Things et entre ainsi dans le champ de 
I'interaction homme-machine. Cependant, ce 
meme mot ne recouvre pas tout a fait la meme 
realite chez ces deux auteurs. Ainsi, pour Gibson, 
une affordance concerne toutes les possibilites 
d'action sur un objet, meme celles qui sont 
latentes ou invisibles. Norman, quant a lui, utilise 
ce terme de maniere restrictive pour designer uni- 
quement les affordances pergues (c'est-a-dire les 
possibilites d'actions que renvoie immediatement 
un objet lorsqu'on le percoit). C'est dans cette der- 
niere acception que nous utiliserons le mot affor- 
dance tout au long de cet ouvrage. 



Decouvrez et appliquez le concept 
d'affordance 

Les affordances sont les possibilites d'action suggerees par les caracteristi- 
ques d'un objet. Par exemple, lorsque vous arrivez devant une porte, un 
faisceau d'indices vous permet de comprendre, avant toute action, si vous 
devez la pousser, la tirer, la faire glisser, etc. Parmi ces indices se trouvent 
des signes implicites (roulements, forme de la poignee, barre horizontale 
sur toute la longueur de la porte, emplacement des gonds, etc.) et des 
signes explicates (un ecriteau Poussez, une personne bien intentionnee qui 
vous dit de pousser, quelqu'un devant vous qui pousse la porte) : 
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Figure 3-30 

Les differentes formes de ces 7 portes vous donnent des indices sur la maniere de les actionner. 

Lorsque vous arrivez sur un site web, ce dernier vous fournit aussi un 
ensemble d'indices pour que vous compreniez quels elements vous per- 
mettront d'arriver a vos fins et de quelle maniere vous devez les utiliser. 
Ainsi, deux dimensions sont capitales a prendre en compte. 

Optimiser l'affordance « vous pouvez me cliquer » 

Lapplication la plus importante de la notion d'affordance sur le Web 
reside dans la differentiation que les internautes peuvent faire entre ce 
qui est cliquable et ce qui ne l'est pas. Deux regies en decoulent. 

Vous devez d'une part optimiser l'affordance a la cliquabilite des elements 
correspondants pour faciliter leur reperage. Autrement dit, l'internaute doit 
savoir tees vite, d'apres l'apparence d'un objet, si ce dernier est cliquable, s'il 
peut le mener quelque part ou lui permettre d'accomplir une action. 

Attention, cette regie doit etre appliquee seulement aux elements primaires 
de navigation, c'est-a-dire ceux que vous privilegiez pour faire circuler les 
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internautes dans le site web. Ces elements sont souvent les plus explicites. 
Vous ne devez surtout pas rendre affordants au clic les elements de navi- 
gation de second niveau, sous peine de surcharger considerablement l'inter- 
face. Par exemple, il n'y a aucun interet a indiquer qu'un logo est cliquable. 
Considerez ces moyens de navigation comme des bonus, qui ne prennent 
une affordance a la cliquabilite que si les internautes les survolent. Vous 
pouvez alors, soit laisser uniquement l'indice de la forme du pointeur, soit 
y ajouter votre propre format survole. 

Plusieurs dimensions d'un objet se croisent pour participer a son affor- 
dance generale. Ainsi, on ne peut atteindre l'affordance a la cliquabilite que 
si la somme des affordances de chaque dimension de l'objet est suffisante. 
Ces dimensions sont les suivantes : 

• forme ; 

• couleur ; 

• libelle ; 

• localisation dans l'interface ; 

• adjonction d'elements indicant la presence du lien (par exemple : une 
puce). 

Au-dela de l'apparence, le comportement des objets peut venir renforcer 
une affordance percue et permettre a l'internaute d'agir de maniere plus 
confiante. C'est par exemple le cas lorsqu'un element que Ton pense cli- 
quable change d'apparence au survol de la souris. On precede d'ailleurs de 
la meme maniere dans la vraie vie. Reprenons l'exemple des portes : si vous 
voyez une porte qui vous semble devoir etre tiree, vous allez essayer de la 
tirer. Si la porte reagit « positivement » (c'est-a-dire quelle s'entrouvre du 
fait de votre effort), vous allez etre plus confiant et la tirer beaucoup plus 
fort ann de l'ouvrir en entier. 

Les elements de navigation (souvent des liens) et d'action (souvent des 
boutons) ne sont pas les seuls dont vous devez travailler l'affordance. 
C'est aussi le cas des elements d'interaction pure (souvent des elements 
de formulaire). 

Optimiser l'affordance « vous pouvez interagir avec moi » 

Prendre en compte la notion d'affordance dans le cas des interfaces tran- 
sactionnelles consiste a donner aux elements de formulaire une appa- 
rence qui incite a les utiliser. L'affordance a l'interaction est obtenue par 
recoupement des dimensions suivantes : 

• forme ; 

• couleur ; 

• libelle ; 



Asavoir 

Les affordances 

optimisent I'utilisabilite 



E 

3 



Les affordances permettent aux internautes d'anti- 
ciper le comportement des objets qu'ils voient a 
I'ecran. Si vous les optimisez, vous allez done aug- 
menter I'utilisabilite de votre page puisque son 
traitement mental sera facilite. 
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Remarque 

Les affordances web sont 

etroitement liees aux conventions 

Notez a quel point ce sont principalement les con- 
ventions de presentation et d'interaction, done les 
habitudes des internautes, qui creent les affor- 
dances des elements web. 
Cela explique aussi pourquoi les interfaces en 
Flash posent souvent de gros problemes d'affor- 
dances. Ne disposant pas des bibliotheques 
strides d'elements que fournit le html, elles sont 
plus susceptibles de presenter les choses de 
maniere moins conventionnelle. Or, moins vous 
etes conventionnel, plus vous avez un risque 
d'obtenir un probleme d'affordance. 
Notez que les concepteurs Flash utilisent bien des 
bibliotheques d'elements, mais chacun possede la 
sienne propre ; par ailleurs, ce sont des elements si 
flexibles qu'ils peuvent etre modifies jusqu'a 
perdre toute ressemblance avec I'element de 
depart. D'ou la production d'interfaces moins con- 
ventionnelles qu'en html (e'est d'ailleurs en 
general exactement dans cet objectif que Ton uti- 
lise du Flash). 



Figure 3-31 L'ajout de texte dans le champ 

de recherche rend moins evident le fait que 

Ton puisse y saisir du texte. 

Source : www.vertbaudet.fr 



• contenu ; 

• localisation dans l'interface ; 

• adjonction d'elements indicant la presence de l'objet ou son caractere 
interactif (par exemple, une puce, un bouton d'action). 

Ainsi, lorsque votre page contient un champ de saisie (recherche, con- 
nexion a un compte client, inscription a une newsletter, etc.), vous devez 
en faciliter le reperage en travaillant son affordance. Pour reperer un 
champ de saisie, les internautes s'attendent a trouver une forme rectangu- 
laire blanche et vide, qui leur permette de saisir quelque chose au clavier : 
e'est le format qui presente la plus grande affordance a l'interaction. 

Cela explique pourquoi le remplissage des champs par defaut avec le 
titre du champ ou avec un exemple de donnees peut etre problematique : 
il n'attire pas l'attention de l'internaute sur le champ en tant qu'element 
d'interaction. N'utilisez done pas ce precede si vous souhaitez que vos 
internautes reperent le plus rapidement possible votre champ de saisie. 

On en trouve une bonne illustration sur le site de Vert Baudet, ou l'ensemble 
du champ de saisie est pre-rempli avec le titre et un exemple de recherche. 
Ce faisant, le champ en tant que tel devient tres peu visible. On peut 
d'ailleurs remarquer que les champs de connexion au compte, vides, 
suggerent beaucoup plus la possibilite de saisir du texte : 




Filla'a-ia** Fille | Tee-shirts et petites pieces de haut 




Le meme type de precede etait employe sur l'ancien site d'Air France. Dans 
cette version de l'interface, la zone de connexion au compte client n'etait 
pas immediatement reperable, en partie a cause des champs pre-remplis 
avec leurs intitules : 



Figure 3-32 

L'ajout des termes ou identifiant et code 

d'acces dans les champs rend ces derniers 

moins affordants a la saisie. 

Source : ancien site www.airfrance.fr 
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La nouvelle version du site d'Air France ameliore Faeces au compte 
Flying Blue en proposant des champs vides, dans une zone reservee a cet 
effet et sur un fond legerement colore : 
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Figure 3-33 Les champs 
de saisie sont plus imme- 
diatement reperables en 
tant que tels sur le 
nouveau site d'Air France. 
Source : www.airfrance.fr 



Nous verrons d'ailleurs au chapitre 5 que placer un champ de saisie sur 
un fond de couleur plus fonce permet de renforcer son affordance percue 
a l'interactivite : l'internaute comprend immediatement qu'il peut agir 
sur cette zone. 

Cependant, il ne suffit pas que la zone sous le champ de saisie soit 
foncee : il faut necessairement que ce champ soit blanc, afin d'obtenir un 
fort contraste de couleurs. C'est en effet cela qui, chez les internautes, 
est connu comme caracterisant un champ de saisie. 

Pour illustration, le site du Centre National de la Cinematographic, qui 
cache la fonctionnalite de recherche a ses visiteurs. En effet, le champ de 
saisie est certes positionne sur une zone foncee, mais il est presente dans une 
couleur sombre, quasi identique. Par consequent, les internautes cherchant 
une zone blanche pour saisir des mots-cles risquent de ne pas la trouver. 



M2M 



centre 
national de 
cinemflTograptile 




Figure 3-34 La recherche est peu visible sur 
le site du CNC, du fait des formats de presentation 
employes, qui « noient » le champ de saisie dans 
le reste de I'interface. 
Source : www.cnc.fr 
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Dans le meme ordre d'idees, lorsque la forme conventionnelle du champ 
est supprimee pour servir l'esthetique de l'interface, le reperage de la 
fonctionnalite de recherche est la encore rendu difficile. Dans certains 
sites, cette fonction peut passer inaperfue au point que les internautes 
pensent qu'il n'y a pas de moteur de recherche. Ainsi, sur l'ancienne ver- 
sion du site Fluctuat.net, il fallait etre persuade que le site possedait for- 
cement un moteur de recherche et parcourir i'ensemble de la page a 
plusieurs reprises pour le trouver enfin : 
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Figure 3-35 Les seuls elements qui indiquent la presence du moteur de recherche 

sont les termes Recherche par mots cle et le bouton d'action. 

Source : ancien site www.fluctuat.net 

La nouvelle mouture du site revient a une presentation plus convention- 
nelle du champ de recherche, facilitant ainsi son reperage par l'internaute : 



Figure 3-36 Le champ de recherche 

du nouveau site Fluctuat.net, 

plus conventionnel, suggere d'avantage 

une possibility d'interactivite. 

Source : www.fluctuat.net 
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Evidemment, lorsque seule la forme rectangulaire est la pour suggerer 
un champ de saisie, la presence de ce dernier n'est que tres peu percep- 
tible. C'est le cas sur le site de Marie-Claire, bien que l'emplacement de 
la fonctionnalite soit plutot bien choisi : 
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Figure 3-37 La recherche (en haut a droite) 
est tres peu visible sur le site de Marie-Claire, 
du fait des formats de presentation employes. 
Source : www.marieclaire.fr 



Pour terminer, notez que vous devez adapter le niveau d'affordance de 
vos champs a leur importance pour l'usager et a vos orientations strate- 
giques. En effet, plus sa presentation suggerera 1'interactivite, plus 
l'internaute sera incite a faire usage d'une fonctionnalite, ce qui fera ainsi 
probablement augmenter son taux d'utilisation. Ainsi, si la fonctionna- 
lite de recherche est centrale sur votre site et que vous voulez inciter vos 
internautes a l'utiliser, il vous faut traduire cette volonte dans l'interface. 
Utilisez done les affordances percues pour mettre en avant le caractere 
utilisable du champ de recherche. 

Attention aux affordances erronees 

On a souvent affaire a des affordances erronees lorsque les concepteurs 
ont cherche a mettre en avant des elements qui ne sont pas des liens. Ne 
soulignez pas un texte qui n'est pas un lien et ce, meme si vos liens ne 
sont pas soulignes. En effet, ce format reste fortement connote d'une 
affordance a la cliquabilite. 

II existe aussi des circonstances ou les mots, bien que non soulignes, sug- 
gerent tres fortement Faction de cliquer. C'est notamment le cas lorsque 
le mot en question semble representer la seule maniere d'agir sur l'interface. 

Voyez ainsi comme, sur le site de Senseo, la maniere la plus evidente de 
declarer que Ton aime prendre son cafe i'apres-midi semble etre de cli- 
quer sur le mot I'apres-midi. Or ce dernier n'est pas cliquable et le cercle 
representant le soleil d'apres-midi ne Test pas non plus. En fait, le seul 
mode d'interaction prevu par les concepteurs du site est de deplacer le 
curseur sous le mot I'apres-midi (figure 3-38). 
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Figure 3-38 Le mot apres-midi presente 

une tres grande affordance a la cliquabilite, 

alors qu'il ne peut pas etre actionne. 

Source : www.senseo.fr 
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Dans le meme ordre d'idees, n'utilisez pas, pour presenter des elements 
inactifs, des formats habituellement adoptes pour des elements 
actionnables : sinon vous risquez que les internautes essaient de les utiliser 
et soient decus, ou pensent que votre site fonctionne mal. Regardez par 
exemple comme on peut penser que l'element Tapis sur le site de Saint 
Maclou est cliquable et permet de derouler une liste, alors qu'il s'agit sim- 
plement du titre de la page : 



Figure 3-39 

Sur le site de Saint Maclou, 

le titre Tapis est affordant au die car 

il ressemble a un menu deroulant. 

Source : www.saint-maclou.com 
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Dans ce livre 
Retrouvez les affordances au chapitre 5 

Pour voir encore plus d'exemples lies a la notion 
d'affordance, rendez-vous au chapitre 5, regie n° 7 ! 



Enfin, faites attention a ne pas presenter un element purement gra- 
phique comme ce qui peut sembler un element interactif. L'internaute 
risque alors de se poser la question de son utilite. Prenons un exemple 
sur le site des 3 Suisses (figure 3-40). 

Cette illustration vous permet de bien comprendre que le travail sur les 
affordances se concentre essentiellement sur une page en particulier. Ne 
tablez done pas sur une legende ou un complement d'informations dans 
une autre page pour compenser un objet mal affordant dans une page. 
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Le nombre magique de Miller 
et la loi de Hick 

A moins d'etre des super-heros, vos internautes sont probablement 
constitutes comme la plupart des etres humains. Et, malheureusement, 
nos capacites mentales sont limitees. Si on lui en demande trop, notre 
cerveau explose et n'est plus capable de traiter de maniere efficace 
1'information qui nous entoure. Sur le Web, comme ailleurs, il est done 
conseille de tenir compte de ces limites arm de concevoir des interfaces 
parfaitement adaptees a nos capacites mentales. 

Miller est un psychologue qui recense dans les annees 50 tout un ensemble 
d'experiences et de preuves scientifiques venant a l'appui d'un constat 
intuitif : au-dela de 7 objets dans notre tete, tout s'embrouille. Le nombre 
magique de Miller, e'est done ce 7, plus ou moins 2 elements (autrement 
dit, un empan de 5 a 9 elements), ce qui represente le seuil maximal de 
ce que Ton appelle notre memoire de travail. 

Cette reference theorique a souvent ete mal interpretee, conduisant a des 
regies tees strictes du type « Ce menu ne doit pas contenir plus de 7 items 
pour que les internautes puissent le memoriser ». Or e'est appliquer de 
maniere tout a fait detournee un resultat scientifique qui n a rien a voir 
avec les problematiques les plus critiques que Ton trouve sur le Web. 

En effet, ce n'est pas parce que Ton parle de memoire de travail que Ton 
doit se croire oblige de faciliter la memorisation des pages web. On 
pourrait meme dire que e'est l'inverse ! Dans l'ideal, votre site doit etre 
assez intuitif et fournir 1'information necessaire au moment adequat, arm 
de pas faire appel a la memoire de vos visiteurs. 



Figure 3-40 

Sur cette page, les deux ronds integrant des 
fleches ressemblent a des boutons cliquables 
alors qu'ils ne sont qu'un appui graphique 
au texte adjacent. 
Source : www.3suisses.fr 
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La memoire de travail peut etre vue comme la structure mentale nous 
permettant de stacker et de traiter les informations temporaires. II faut 
bien un endroit pour mettre provisoirement les choses que Ton analyse 
ou qui vont passer en memoire a long terme : c'est cet endroit que Ton 
appelle la memoire de travail. Ainsi, lorsque vous retenez un numero de 
telephone juste assez longtemps pour le saisir sur votre clavier telepho- 
nique, vous utilisez votre memoire de travail. 

Finalement, le nombre magique de Miller peut etre assimile a notre 
capacite d'apprehension immediate. Plus qu'une limite maximale sur le 
nombre d'elements a analyser simultanement, le nombre de Miller doit 
vous servir a ne pas surcharger votre interface et a limiter le nombre 
d'elements dont un seul doit etre selectionne. 

Sur le Web, il semble beaucoup plus adapte de tenir compte de la loi de 
Hick (ou loi de Hick-Hyman). Celle-ci developpe l'idee qu'il est plus 
facile de decider parmi un nombre reduit d'elements. En effet, le temps 
necessaire pour prendre une decision croit proportionnellement au 
nombre et a la complexite des options proposees. Ainsi, ce modele semble 
beaucoup plus approprie que le nombre de Miller aux problematiques 
que Ton rencontre dans la conception de menus pour le Web. 



Accessibility visuelle et lisibilite 

Le Web etant un media tres visuel, il est primordial d'optimiser la per- 
ception par l'oeil des differents elements situes a l'ecran. 

Le mot « accessibility » tire ses racines du mot « acces ». Travailler sur 
l'accessibilite, c'est s'assurer que Ton facilite Faeces a quelque chose, a un 
bus, a un musee, a un supermarche, a un pare ou a un site web. Lorsque 
Ton park d'accessibilite visuelle dans le domaine du Web, on s'attache 
aussi bien a ameliorer les caracteristiques perceptives pour qu'elles corres- 
pondent aux fonctionnement de notre systeme visuel, qua ameliorer les 
pages web pour que tous les internautes puissent les consulter, quel que 
soit leur niveau de perception visuelle. Deux versants se degagent done : 

• Lorsque l'accessibilite visuelle est abordee dans le cadre du handicap, 
on s'attache a concevoir des sites consultables par des internautes 
penalises sur le plan visuel (malvoyants ou non voyants) ; ils utilisent 
sur le Web des moyens de navigation differents du mode visuel afin 
de contourner leur difficulte. II s'agit alors de faciliter l'emploi de ces 
moyens de contournement des systemes courants. De la meme 
maniere que le bus se penche pour accueillir un fauteuil roulant ou 
une poussette, le site web est concu afin d'etre lu de maniere optimale 
par une synthese vocale (pour en savoir plus sur ce type d'outils, 
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rendez-vous a la fin du chapitre 6). Dans le domaine du Web, cette 
demarche depend souvent de la realisation technique, et plus precise- 
ment de l'integration HTML/CSS du site. 

Au-dela de cette problematique tres specifique, tous les internautes 
ont besoin qu'un site soit optimise du point de vue de l'accessibilite 
visuelle. On s'attache alors a faciliter 1'utilisation courante du sys- 
teme. De la meme maniere que la marche du bus ne doit pas etre trop 
haute pour une personne de taille moyenne, le site web doit etre faci- 
lement lisible par un ceil « moyen ». Dans le domaine du Web, ce 
type de demarche releve plutot de 1'optimisation graphique. C'est 
principalement ce que nous evoquerons dans cet ouvrage. 
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Faciliter 1'utilisation de moyens de contournement 
du mode visuel 

II n'est pas forcement du ressort de l'ergonomie de comprendre en pro- 
fondeur les solutions techniques permettant de contourner une mal- 
voyance. Cependant, c'est un sujet tres interessant et il est indispensable 
de connaitre les facteurs principaux qui rendent un site accessible ou non 
pour des populations en difficulte sur le plan visuel. Vous trouverez sur 
Internet de nombreuses ressources sur ce sujet. 



Aller PLUS LOIN Comment la conception des liens peut-elle optimiser l'accessibilite visuelle ? 



Le principe d'une synthese vocale consiste a lire une 
page web afin de restituer son contenu sous forme 
auditive. Elle permet ainsi a des malvoyants de navi- 
guer sur le Web. 

II s'avere que les liens generiques (de type Cliquez ici, 
Lire /'article, Lire la suite, Details, Voir, Recommander, 
etc.) sont tres difficiles a comprendre par les inter- 
nautes qui utilisent ce type d'outils : ceux-ci ne dispo- 
sent pas du contexte visuel permettant de mettre en 
relation le lien avec le reste de la page. En effet, alors 
que la perception visuelle d'un ecran est tres flexible 
(on peut regarder tres vite ou Ton veut et I'apparence 
des elements nous aide a diriger notre regard), la per- 
ception auditive est necessairement lineaire. 
Vous devez done adapter la conception de votre site et 
de sa version texte a cette contrainte. Ainsi, on recom- 
mande d'eviter les intitules de liens trop generaux. En 
dernier recours, vous pouvez definir une balise Title 
(dont le contenu sera alors lu par la synthese vocale si 



elle est bien configuree) pour decrire de maniere plus 
detaillee ces liens non explicites. Regardez ainsi com- 
ment cette recommandation est appliquee sur le site 
d'Ergolab et allez ecouter le resultat sur le site web qui 
accompagne cet ouvrage : 



Don't make me think 
Steve Krug 

Date de la chronique [28.10.2003] 

Le livre est beau, le titre evocateur. 

Don't make me think fait de l'ergonomie du web un domaine 

accessible a tous. Le sous-titre "A Common Sense Approach to 

Web Usability" est revelateur de I'esprit ... 

» lire la suite 

Lire la chronique de "Don't make methink" 



Figure 3-41 Le contenu de la balise Title permet d'etre plus 

precis que le simple lien Lire la suite mais il ne s'affiche que 

dans une infobulle et n'est malheureusement pas toujours lu 

par les syntheses vocales. 

Source : www.ergolab.net / Resultat auditif a ecouter sur 

www.ergonomie-sites-web.com/telechargements 
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Deux grands types de methodes sont a mettre en oeuvre pour optimiser 
les versions texte d'un site web. Tout d'abord, il faut appliquer des regies 
de conception bien precises. Ces dernieres sont amplement recensees 
dans tous les guides et normes d'accessibilite web. Elles vont de la neces- 
site de definir pour chaque image un substitut textuel, a l'expression des 
tailles de polices en taille variable (et non en taille fixe), en passant par 
l'optimisation de la conception des intitules de liens, etc. 

En outre, il faut utiliser des moyens techniques pour faciliter la consulta- 
tion d'une version texte (que ce texte soit restitue sous forme auditive ou 
tactile) : il est par exemple necessaire de separer contenu et forme (les 
CSS sont a cet effet des atouts indispensables). 

L'ajout de fonctionnalites specifiques peut aussi faciliter la consultation 
d'un site sous forme textuelle. Par exemple, on recommande de fournir 
un lien permettant aux internautes de ne pas tenir compte des elements 
repetes sur toutes les pages (principalement les barres de navigation). 
Ainsi, comme les balises Title, les liens que Ton appelle SkipLink per- 
mettent de contourner le cote lineaire de la modalite auditive. 



Optimiser la lisibilite a I'ecran 

Le second versant de l'accessibilite visuelle consiste a optimiser la lisibi- 
lite des sites pour tous les internautes, afin d'eviter les phenomenes de 
fatigue visuelle. Cela passe principalement par deux points : d'une part, 
l'optimisation des couleurs et, d'autre part, l'optimisation des caracteris- 
tiques des textes. 

Optimisation des couleurs 

Pour que votre site soit lisible, il faut necessairement que les couleurs 
employees, respectivement, pour le fond de page et pour les caracteres qui 
viennent s'inscrire sur ce fond, soient assez differentes. Cette difference 
doit etre evaluee selon deux parametres. 

La difference de couleurs 

Les couleurs du fond et des caracteres doivent etre suffisamment con- 
trastees. On recommande generalement d'utiliser un contraste positif, 
c'est-a-dire des caracteres fonces sur un fond clair. 

De maniere plus approfondie, vous devez mesurer objectivement la dif- 
ference de couleurs fond/caracteres. Vous disposez pour cela d'outils qui 
permettent de comparer cette difference avec le seuil de 500 recom- 
mande par la WAI ( Web Accessibility Initiative) du W3C ( World Wide 
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Web Consortium). Nous aborderons ces outils a la fin du chapitre 6 sur 
l'audit ergonomique. Sachez toutefois qu'ils ne sont pas infaillibles. 

Deux donnees supplementaires doivent notamment etre prises en consi- 
deration. Tout d'abord, vous devez eviter les combinaisons de couleurs 
connues pour « vibrer » (par exemple, le blanc pur sur du noir pur). Les 
outils de calcul des contrastes ne sont en effet pas capables de reperer ce 
type de defauts. II faut egalement savoir que la taille et la graisse d'un 
caractere permettent de compenser quelque peu le manque de contraste 
entre le fond et le caractere. Plus les caracteres sont grands et gras, plus 
vous pouvez vous permettre une difference de couleurs reduite. 
Regardez cet exemple sur le site d'IBM, ou la meme couleur utilisee avec 
et sans graisse devient plus ou moins lisible (figure 3-42). 

La difference de brillance 

En outre, les couleurs du fond et des caracteres doivent etre suffisam- 
ment differentes en termes de brillance. On recommande en general une 
difference superieure a 125. 



Integration de processus 
d'entreprise 

Les serveurs d'integration offrent 
une infrastructure centralisee qui 
permet d'integrer les applications 
et d'automatiser les processus 
metier. 



-* Tous les produits 

Figure 3-42 Alors qu'ils sont de la meme 

couleur, le lien Integration de processus 

d'entreprise (presente en gras) est plus lisible 

que le lien Tous les produits (sans gras). 

Source : www.ibm.fr 
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Optimisation des caracteristiques des textes 

La seconde dimension permettant d'optimiser la lisibilite d'un texte a 
l'ecran consiste a travailler sur les caracteristiques intrinseques des textes. 
Nous n'aborderons pas ce sujet en detail dans cet ouvrage, mais sachez 
que les cinq parametres les plus importants dans ce cadre sont : 

• la taille des polices ; 

• leur graisse ; 

• la typographie employee (le sans serif est ainsi connu pour etre plus 
lisible a l'ecran) ; 

• l'interlignage ; 

• et enfin la casse employee (minuscules ou majuscules). 

Prenons l'exemple de ce dernier critere. Vous devez tenir compte du fait 
que les majuscules sont la casse la plus appropriee pour faciliter l'activite 
de recherche dans une page, tandis que les minuscules sont recommandees 
pour faciliter la lecture. Autrement dit, vous ne devez utiliser les majus- 
cules que pour mettre en avant certains mots et ce de maniere assez 
cadree. Elles ne doivent servir a attirer l'attention que dans la limite de 
quelques mots au sein du meme bloc d'informations. Ainsi, il est accep- 
table que l'accroche du site des Nations unies a Geneve (Les Nations Unies 
au cceur de I'Europe) soit ecrite en majuscules, alors que cela devient dis- 
cutable pour les libelles de la barre de navigation, et impossible pour les 
titres des informations quotidiennes, trop longs (figure 3-43). 
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Figure 3-43 

Plus la quantite de texte est importante, 

plus I'emploi des majuscules complique 

I'activite de lecture. 

Source : www.unog.ch 
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Cette recommandation poussant a preferer les minuscules aux majus- 
cules pour optimiser la lisibilite est basee sur des considerations a la fois 
objectives et subjectives. II est largement demontre que les minuscules 
sont plus faciles a lire et augmentent la vitesse de lecture. On peut 
d'ailleurs le realiser de maniere assez intuitive en comparant deux textes 
ecrits en majuscules et en minuscules : 



Figure 3-44 

On percoit rapidement qu'un texte ecrit entie- 

rement en majuscules est plus difficile a lire 

qu'un texte ecrit en minuscules. 



Le texte en minuscules est plus facile a lire. 

LE TEXTE EN MAJUSCULES EST PLUS DIFFICILE A LIRE. 



De nombreux resultats de recherche viennent en outre appuyer ce constat 
intuitif (Breland & Breland, 1944 ; Starch, 1914 ; Tinker, 1963). Karen 
Schriver nous indique quant a elle qu'un texte entierement en majuscules 
est lu 13 a 20 % moins vite que le meme texte en minuscules. Elle nous 
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precise aussi que la vitesse de lecture est optimale lorsque majuscules et 
minuscules sont utilisees de maniere complementaire (notamment lorsque 
les majuscules sont utilisees en debut de phrase). Enfin, elle souligne le fait 
que, lorsque Ton a besoin de mettre en valeur un element, il semble plus 
approprie d'utiliser la graisse plutot que les majuscules. 

Cet ensemble de resultats est du aux caracteristiques typographiques des 
minuscules et majuscules, ainsi qua nos habitudes de lecture (dans notre 
vie, nous rencontrons davantage un mot ecrit en minuscules que le 
meme mot ecrit en majuscules). 

Dans la forme generale d'un mot ecrit en minuscules, les hampes, 
points, accents et cedilles aident a discriminer les lettres les unes des 
autres. A l'inverse, la forme generale d'un mot ecrit en majuscules est 
toujours identique : il s'agit d'un strict rectangle, ou aucune lettre ne 
peut etre differenciee d'une autre. 
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Figure 3-45 

Les caracteristiques typographiques 

des minuscules facilitent la differentiation 

entre chacune des lettres. 



Terminons notre propos par la constatation suivante : ces resultats 
objectifs sont largement corrobores par les preferences des utilisateurs. 
Ainsi, lorsqu'on leur demande d'apprecier la lisibilite du titre d'un article 
de maniere subjective, 90 % des personnes trouvent les minuscules 
faciles a lire, alors que seulement 65 % trouvent les majuscules faciles a 
lire (Colin Wheildon, 1995). 

Avec cette partie consacree a l'accessibilite visuelle et a la lisibilite sur le 
Web, nous achevons notre developpement sur les grandes caracteristiques 
de l'etre humain et de ses reflexes. Une fois que vous avez bien en tete ce 
qui definit votre internaute en tant qu'etre humain, vous devez vous 
occuper de chercher ce qui le definit en tant qu'utilisateur de votre site 
web : qui est-il ? Que cherche-t-il a faire ? Et dans quelles conditions ? 
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Definir votre internaute : 
criteres et methode des personas 



Une fois que vous avez traite le versant « universel » definissant 
un internaute, vous devez vous preoccuper de ce qui caracterise 
votre internaute. Autrement dit, vous allez ajouter 
a ses caracteristiques d'etre humain tout ce qui lui est 
specifique en tant que personne. 

Ainsi, vous entrez de plain-pied dans ce qui fait veritablement 
l'ergonomie, a savoir definir l'utilisateur et ses particularites 
afin de concevoir un systeme adapte a ses besoins. 



SOMMAIRE 

► Definir qui sont vos internautes 
et ce qu'ils font 

► La methode des personas 

MOTS-CLES 

► Profils utilisateurs 

► Personas 

► Scenarios d'utilisation 



Methodologie 
Et si je saute cette etape ? 

Si par manque de temps oil d'interet vous omettez 
de definir le plus precisement possible qui sont vos 
internautes, vous commettez I'erreur la plus cou- 
rante dans les projets web actuels. Ainsi, concevoir 
un site sans tenir compte des specificites et 
besoins de ses visiteurs produit un outil polyvalent 
mais incapable de les satisfaire. 
Dans le second volet de ce chapitre, vous appren- 
drez done a remplacer votre vision generique de 
I'internaute par une vision specifique de vos per- 
sonas. Et pas d'inquietude : vous vous rendrez vite 
compte du rapport qualite/prix incroyable de cette 
methode I 



Un site ergonomique est avant tout un site qui se preoccupe de ses utili- 
sateurs. Vous devez par consequent vous mettre au travail pour com- 
prendre qui ils sont reellement et ainsi vous adapter a leurs besoins. 
Nous allons done evoquer dans ce chapitre ce qui caracterise un inter- 
naute au-dela de son appartenance au genre humain et insister sur la 
methode des personas, irremplacable pour definir votre cible utilisateur 
et la prendre en compte tout au long d'un projet web. 



Une personne donnee dans un contexte 
precis 

II ne suffit pas de dire que l'utilisateur est au cceur de votre demarche 
pour reussir votre projet d'un point de vue ergonomique. Le mot utilisa- 
teur en soi est problematique, puisqu'il peut signifier tout et n'importe 
quoi. II faut done aller plus loin et veritablement s'interroger sur les 
caracteristiques de vos internautes et les besoins qui en decoulent. Ces 
informations seront les points d'entree qui vous permettront de prendre 
des decisions en termes de fourniture de contenus et de services, puis 
d'utilisabilite. 

Des personnes differentes ont des caracteristiques et des besoins diffe- 
rents. Vous devez done decouvrir les specificites de vos internautes afin 
de fabriquer une interface a leurs mesures. 

La premiere etape de toute demarche ergonomique consiste done a 
fouiller dans toutes les sources disponibles afin de comprendre qui sont 
(ou qui doivent etre) vos visiteurs. Tous les internautes sont differents, 
mais il est probable que certains des votres partagent des caracteristiques 
communes. C'est le moment de faire la chasse aux indices pour cerner 
ces traits distinctifs ! 

Questionnez vos clients, le service marketing, la direction, les chefs de 
projet, le service apres-vente, bref, toutes les personnes qui pourraient 
vous aider a obtenir des informations. Votre role consiste a rassembler 
toutes ces donnees et a en degager des profils utilisateurs. Surtout, ne 
cedez jamais au syndrome « Madame Michu ». Lors de votre enquete, 
gardez a l'esprit qu'une population cible est composee de 3 criteres 
definitoires : 

• des personnes ; 

• des objectifs ; 

• des contextes d'utilisation. 
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Idee recue Si ?a fonctionne pour ma grand-mere, ca fonctionnera pour tout le monde 



(fonctionne aussi avec Simone, Monsieur Tout-le-monde, 
la menagere de moins de 50 ans, I'idiot de service et 
autres stereotypes du meme acabit) 
C'est faux et c'est meme tout le contraire de I'objectif 
de I'ergonomie web ! N'essayez pas de concevoir votre 
site pour n'importe qui, une personne moyenne ou la 
personne la plus novice, mais pour vos utilisateurs. Ce 
sont eux qui vous jugeront au final, en fonction de 
leurs besoins specifiques. Si votre interface est concue 
pour d'autres, elle risque de ne pas leur correspondre. 
Un exemple courant : si, en suivant le precepte du « Qui 
peut le plus peut le moins », vous concevez votre site 
pour des populations tres novices face a I'outil informa- 
tique, vous risquez de simplifier votre interface a 
I'extreme. Vous pourriez ainsi etre tente de decouper un 
processus complexe en de nombreuses etapes, afin de 
rendre chacune d'elles tres simple. Or ce procede produit 
une interface tres rigide, peu permeable aux pheno- 
menes d'apprentissage : meme si leur niveau d'expertise 
augmente, vos utilisateurs seront toujours bloques par le 
cheminement impose par le systeme. Ainsi, une interface 
congue pour des debutants peut empecher une progres- 
sion dans la rapidite d'execution future. 



De la meme maniere, si vous protegez a I'extreme vos 
utilisateurs contre les erreurs sans moyen de contour- 
nement, vous allez contraindre les plus experts a subir 
des messages de confirmation incessants, dont ils se 
seraient bien passes. 

Si vous concevez pour I'utilisateur le plus novice, vous 
risquez done de penaliser celui dont le niveau d'exper- 
tise est plus eleve. Ceci se ressentira a la fois sur le plan 
objectif (ils seront moins efficients qu'ils ne pourraient 
I'etre), mais aussi sur le plan subjectif (se sentant con- 
tracts et assistes comme des debutants, ils pourraient 
revendiquer un peu de liberte en allant regarder ce qui 
se fait chez vos concurrents). 

Une anecdote a ce sujet : Jakob Nielsen et Hoa 
Loranger relatent dans leur ouvrage Prioritizing Usability 
que les 69 internautes recrutes pour les besoins du livre 
avaient tous au moins 1 an d'experience dans la navi- 
gation sur le Web. Ce choix permettait d'eliminer 
d'office toute personne trop debutante qui viendrait 
influencer les resultats de maniere trop marquee. 
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En tant que personne, un internaute est caracterise par des dimensions 
qui lui sont propres et que vous devez prendre en compte afin de 
repondre pleinement a ses besoins. Un internaute possede ainsi un profil 
socio-demographique, un objectif 1'amenant a visiter un site Internet, un 
historique avec ce site, la marque, ou ses concurrents, un niveau d'exper- 
tise Internet, des habitudes de navigation sur le Web, etc. 

La notion de tache pour mieux cerner l'internaute 

Au-dela de sa definition en tant que personne, l'internaute qui vient sur 
un site a des objectifs. S'il n'en a pas, il ne nous interesse pas d'un point de 
vue ergonomique (en revanche, on tiendra compte d'un objectif meme 
flou ou qui releve de la decouverte, par exemple pour les internautes qui 
arrivent sur un site sans vraiment savoir ce que propose ce dernier). 

Afin de bien comprendre les objectifs de vos internautes et la maniere 
dont ils entendent les atteindre, vous devez les questionner et/ou les 
observer. A cet effet, la demarche d'analyse de l'activite vous sera tres 
utile pour comprendre tous les determinants d'une tache. 
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Par exemple, si vous devez concevoir une interface pour jouer au Loto en 
ligne, vous devez parfaitement comprendre ce qui sous-tend ce jeu dans 
la vie reelle. Allez dans des bureaux de tabac, des maisons de la presse, 
interrogez des gens, frottez-vous a leur activite pour en saisir les proto- 
types comportementaux. Les donnees que vous en tirerez vous serviront 
non seulement du point de vue de l'utilite (de quoi vos internautes ont- 
ils besoin), mais aussi de l'utilisabilite (comment en ont-ils besoin). 

De meme, si vous travaillez sur le site d'une agence de voyages en ligne, 
il vous sera indispensable de recueillir des donnees vous permettant de 
repondre a la question suivante : « Comment les gens achetent-ils des 
voyages aujourd'hui ? ». Lorsque vous vous penchez sur ce type d'inter- 
rogation, vous sortez de votre role de concepteur pour vous mettre a la 
place des gens. Ainsi, vous ouvrez votre esprit et lui permettez d'ima- 
giner des fonctionnalites auxquelles vous n'auriez pas pense sans cela. 

La maniere dont les gens utilisent l'interface sur laquelle vous travaillez 
est aussi un facteur primordial dont vous devez avoir conscience, et que 
vous devez prendre en compte en permanence. Par exemple, si la plupart 
de vos internautes utilisent le site plusieurs heures par jour, cette infor- 
mation devra necessairement intervenir dans la conception de votre 
interface. C'est par exemple le cas d'applications metiers ou d'outils en 
ligne permettant l'exercice d'une activite professionnelle. Cela peut aussi 
etre valable pour des interfaces web tres specialises, par exemple des 
sites de bourse en ligne, de poker en ligne, d'encheres en temps reel, etc. 
Dans ce type d'interface, vous pourrez accepter un temps d'appropria- 
tion de l'outil par les debutants, afin de l'optimiser pour les utilisations 
les plus frequentes, ramenees au pourcentage d'heures d'utilisation. 

Les statistiques de visite, un atout majeur 

Si vous etes dans un projet de refonte d'un site existant, l'analyse des sta- 
tistiques d'utilisation peut vous etre d'une grande aide si ces dernieres 
sont suffisamment interpreters. Difficile en effet de comprendre quelque 
chose a des fichiers de logs bruts fournis par un serveur. Si votre site ne 
dispose pas de statistiques analysees, renseignez-vous pour savoir s'il 
existe des fichiers non traites et si vous pouvez les faire interpreter. 

Vous tirerez des statistiques deux grands types d'informations : 

• D'une part, des renseignements sur les configurations des ordinateurs 
de vos visiteurs. Vous devez normalement avoir acces au moins a des 
informations sur le systeme d'exploitation utilise, le navigateur et sa 
version, la resolution d'ecran et les plug-ins disponibles. Ces donnees 
vous seront precieuses pour prendre des decisions technologiques et 
d'interface. Nous verrons au chapitre 5 a quel point la problematique 
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de l'accessibilite technologique est importante, et au chapitre 9 com- 
ment elle influence l'activite de conception fonctionnelle. 
• D'autre part, la qualite des visites en termes fonctionnels : quelles 
sont les pages les plus visitees, le nombre de pages vues par visite, les 
elements d'une page qui font l'objet du plus grand nombre de clics, le 
taux d'abandon a chacune des etapes d'un process de commande, les 
mots-cles recherches, etc. 

Au-dela des outils de statistiques classiques, commencent a emerger des 
applications qui traitent aussi les donnees qui n'ont pas d'effet en termes 
d'interaction web. Elles proposent en outre des representations sous des 
formes graphiques tres interessantes, nous donnant ainsi des informa- 
tions sur le comportement des internautes au sein d'une page web. 

Voyez ainsi comme ClickDensity se propose d'enregistrer tous les clics 
realises sur une page et de representer ces derniers sous forme de heat- 
maps, ou zones de chaleur : 




La suite sur le Web 

Voir cette illustration en couleurs 

sur le site compagnon 

Sur une heatmap, le rouge represente les zones 
faisant l'objet du plus grand nombre de clics. Diffi- 
cile de se faire une idee claire du resultat en noir et 
blanc, alors rendez-vous sur le site compagnon du 
livre pour voir cette illustration haute en couleurs ! 
► http://www.ergonomie-sites-web.com/ 
telechargements 



Figure 4-1 

Grace a ClickDensity, vous pouvez voir oil vos 
internautes preferent cliquer sur votre site. 
Sources : www.clickdensity.com / www.reser- 
voir-jeux.com 
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Vous etes ainsi a meme d'analyser precisement ce sur quoi cliquent vos 
internautes et l'endroit ou ils cliquent. En effet, ClickDensity recense 
tous les clics, et pas uniquement ceux sur les liens (comme les outils de 
statistiques habituels). Ainsi, vous pourrez observer quelles erreurs com- 
mettent vos visiteurs, leurs preferences et leurs habitudes. 

Dans le meme ordre d'idees, ClickTale se propose d'ajouter les mouve- 
ments de la souris, meme si ce type de donnees est beaucoup plus diffi- 
cile a interpreter. Attention a ne pas faire de raccourcis ! 

Interroger les internautes 

Pour affiner la vision de vos internautes, rien de tel que d'aller les inter- 
roger, que ce soit lors d'entretiens en face a face ou grace a des methodes 
plus distantes (questionnaires en ligne, entretiens en ligne ou discussion 
sur des forums, sondages, etc.). Votre objectif est de savoir qui ils sont, 
ce qu'ils font, de quoi ils ont besoin et de quoi ils ont envie. 

Toutes ces informations, que vous aurez recoltees par divers moyens, 
vont servir a vous construire une vue precise et complete de vos inter- 
nautes, essentiellement arm de nourrir vos personas. Mais au fait, savez- 
vous ce quest un persona ? 



&ONJOUK, JE M'APPELLE FRANCIS, 
JE VIENS ACHETEK U'EXTENSUSKJ DU 
JEU JUSJ&UE SPEED. 




Figure 4-2 



Un persona pas comme les autres 

Nous allons a present aborder une methode de conception qui vous per- 
mettra de reellement prendre en consideration votre cible utilisateur lors 
du developpement d'une interface web. 

Ainsi, nous allons apprendre a creer ce que Ton appelle des personas. Ce 
sont des personnages virtuels, que vous allez imaginer pour representer 
votre cible utilisateur. Ce sont done de « faux utilisateurs », crees de 
toutes pieces pour des besoins methodologiques. Adopter ce reflexe de 
conception possede de nombreux avantages, entre autres un cout de mise 
en oeuvre tres faible. Un incontournable done ! 

Les personas representent les utilisateurs typiques, ce qui permet d'evo- 
quer la cible utilisateur de maniere concrete et proche de la realite. Sup- 
port de travail au sein d'une equipe projet, ils servent a communiquer 
autour d'un referent commun. Voyons les benefices que vous pouvez 
retirer de cette methode, ainsi que quelques regies pour creer et utiliser 
les personas. 
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BlBLlOGRAPHlE Un livre entierement consacre aux personas 



700 pages sur le sujet des personas, structures autour 
de ce que les auteurs nomment le cycle de vie d'un 
persona : de la gestation a la mort, en passant par la 
naissance, I'enfance puis I'age adulte. Bourre d'exem- 
ples, d'etudes de cas, d'illustrations, de temoignages, 
c'est un must-have si vous souhaitez vous documenter 
en profondeur sur le sujet. 

03 John Pruitt & Tamara Adlin, The Persona Life- 
cycle : Keeping People in Mind Throughout 
Product Design, Morgan Kaufmann, 2006 



PERSONA LIFECYCLE 




Pourquoi avez-vous interet a inventer des personas ? 

Les avantages des personas sont tellement nombreux qua leur lecture, 
vous comprendrez vite pourquoi cette methode est si interessante a mettre 
en place lors d'un projet web et pourquoi elle devrait etre appliquee sur 
tous les projets. Voyons done pourquoi vous devriez creer des personas. 



Inventer des personas vous force a vous pencher reellement 
sur votre cible 

Un des principaux benefices des personas, que Ton oublie toutefois sou- 
vent, est qu'en vous astreignant a les creer, vous vous interrogerez force- 
ment davantage sur vos internautes. Et cela ne concerne pas que le 
createur des personas, tout le monde sera impacte par cette attention 
particuliere portee a la cible du site : vous, mais aussi vos clients, l'equipe 
projet et, par extension, toutes les personnes impliquees dans la conception 
ou la realisation de votre site web. 

En essayant de creer vos personas, vous allez etre amene a poser de nom- 
breuses questions a vos clients sur leur cible utilisateur. Ainsi, vous allez aug- 
menter le niveau de precision de la definition de votre cible. Plus vous irez 
dans le detail, mieux vous comprendrez a qui est destinee votre interface. 

Vous devez bien comprendre qu'il est tres important de prendre en 
compte l'utilisateur, mais cela ne suffit pas. Meme le terme utilisateur est 
trop vague pour vous aider reellement dans votre travail de conception. 
II revient a dire que vous vous preoccupez de votre cible. Tres bien. Mais 
qui est-elle, de quoi a-t-elle besoin, que devez vous lui offrir ? 



Point devue 
Le syndrome de l'utilisateur elastique 

La methode des personas vient repondre a une 
tendance marquee dans le domaine du Web, as- 
sistant a annoncer que Ton prend en compte l'uti- 
lisateur final, sans aller plus loin. On fourre done 
dans cette notion d'utilisateur tout ce qui peut 
nous servir a appuyer notre propos, sans reelle- 
ment se preoccuper de savoir qui sont les inter- 
nautes et quels sont leurs objectifs. 
A I'inverse, creer des personas vous permet d'avoir 
toujours en tete leurs profils et leurs besoins et 
non ceux d'un utilisateur type, dont la definition 
peut etre vague. 



Inventer des personas humanise votre cible 

Vous ne creez pas un site Internet pour des machines. Les gens qui vont 
consulter votre site sont des etres humains, ils ont des caracteristiques, 



79 



Anecdote 
Les personas deviennent vos utilisateurs 

Les personas peuvent si bien entrer dans le quotidien 
des equipes projet qu'ils deviennent familiers a tout 
le monde et que leurs prenoms entrent dans le Ian- 
gage commun. Ainsi, John Pruitt (Microsoft) parle 
des participants a un test utilisateur en ces termes : 
« Today we've got two Patricks' and a Sandra and an 
Abby » (Aujourd'hui, nous avons deux Patrick, une 
Sandra et une Abby). 



envies, besoins, histoires, habitudes, qui vont influencer leur maniere de 
naviguer sur votre site. 

Ces caracteristiques doivent se retrouver chez vos personas. Ainsi, un per- 
sona possede un visage, un prenom, un age, un metier, des sites web pre- 
feres, etc. De par leur ressemblance a des personnes reelles, ils favorisent 
l'empathie : il est plus facile pour les equipes projet de s'approprier un Fran- 
cois qui pourrait etre leur voisin de palier, plutot qu'un utilisateur indefini. 

Inventer des personas donne des objectifs a votre cible 

Lorsque vous creez des personas, vous n'essayez pas seulement de decrire 
qui ils sont mais aussi (et presque surtout...) ce qu'ils font ! Autrement 
dit, ce qui vous interesse le plus est de depeindre vos personas afin de 
comprendre leurs objectifs lorsqu'ils viennent sur votre site. 

Une part importante du travail de creation des personas consiste done a 
leur donner des missions. Ainsi, les personas deviennent la reference 
pour decrire et hierarchiser les objectifs utilisateurs que vous aurez recoltes 
lors de l'etape precedente. 



Comment creer et utiliser des personas ? 

Passons a la pratique, avec quelques conseils fondamentaux pour vous 
aider a concevoir, mais aussi a utiliser efficacement vos personas. 

II existe differents types de personas 

L'ensemble des personas represente votre cible utilisateur d'un point de 
vue ergonomique. Cependant, tous les personas ne sont pas egaux. On 
distingue principalement 4 types de personas : 

• Le persona primaire est votre cible de predilection. II represente sou- 
vent le type de visiteur le plus frequent sur votre site, sans que cela 
soit toutefois une regie. Si vos personas s'opposent a propos d'une 
decision de conception, e'est votre persona primaire qui aura le der- 
nier mot. Par exemple, il pourra determiner les options par defaut du 
systeme. Notez qu'il est possible d'avoir deux ou plusieurs personas 
primaires qui sont alors sur un pied d'egalite. 

• Les personas secondaires constituent le second niveau de profils utili- 
sateurs. Ils se servent du systeme moins frequemment ou avec des 
exigences moindres en termes de besoins fonctionnels. Cela peut 
etre, par exemple, les utilisateurs d'une application metier qui font 
toujours appel a une seule et meme fonction. 

• Vous pouvez aussi avoir des personas tertiaires, qui sont des profils 
annexes, souvent « a cote » des autres personas (par exemple sur un 



80 



site destine aux enfants, leur professeur ou leur mere), mais qui vous 
permettront d'instiller quelques contenus ou fonctionnalites impor- 
tants pour satisfaire ce type de visiteur. 

• Un dernier type de persona est constitue des ante-personas. Rare- 
ment utilises dans la pratique, ils representent des profils que vous ne 
voulez pas satisfaire. Autrement dit, l'interface ne doit pas etre modi- 
fiee uniquement pour satisfaire leurs besoins. 

Tous les personas ont droit a la parole, sous reserve que leur besoin ne 
vienne pas contredire celui du persona primaire. Votre objectif est que 
tout ce petit monde s'entende le mieux possible et done de satisfaire tous 
les besoins via des choix d'interface de niveaux differents. 

Si vous etes dans un projet de refonte d'un site, vous ne devez pas force- 
ment vous baser uniquement sur la distribution reelle de votre popula- 
tion actuelle pour choisir qui seront vos personas. En effet, ces derniers 
doivent aussi etre porteurs de choix strategiques, d'orientation marquee 
vers la satisfaction de telle ou telle cible. 



Point devue 
Le rapport entre persona 
et typologie d'utilisateurs 

Dans I'absolu, vous pouvez considerer qu'un per- 
sona represente un groupe d'utilisateurs. Cepen- 
dant, dans la pratique, un persona est unique, 
specifique. Un persona n'est finalement qu'une 
caricature d'un groupe d'utilisateurs, il est done 
une seule personne (et e'est indispensable pour 
des necessites methodologiques). 
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Combien de personas devez-vous creer ? 

Le persona est ce que Ton pourrait appeler un representant de la cible 
ergonomique d'un site web. Cette definition n'est pas anodine car elle sup- 
pose que vos personas ne vont pas forcement recouvrir l'ensemble des visi- 
teurs de votre site. Certains peuvent notamment etre exclus du monde des 
personas, car ils n'ont pas de besoin particulier, ou parce que Ton estime 
qu'ils pourront s'adapter au profil de Fun ou l'autre des personas. 

Vous devez toujours viser l'objectif d'avoir au final le moins de personas 
possible, afin que ces derniers aient une efficacite maximale. Creer des 
personas ne vise pas du tout la description exhaustive de votre cible (e'est 
meme l'inverse). Ainsi, avoir 15 personas ne vous aidera en rien a 
prendre des decisions de conception, puisque qu'il sera tres difficile de 
faire des choix si leurs interets entrent en conflit. 

II est d'ailleurs probable que, si vous en arriviez a avoir 15 personas, certains 
puissent etre elimines en reportant leurs caracteristiques distinctives sur 
d'autres personas capables de les accueillir. 

La creation d'un persona est un travail collectif 

Si vous essayez de creer vos personas tout seul dans votre coin, il est pro- 
bable qu'il vous arrive trois types de problemes : 

• Vous vous trompez et, au moment de la validation, bon nombre de 
collaborateurs du projet emettent leurs doutes et vous font recom- 
mencer votre travail. 
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• Vous vous trompez mais personne ne vous le fait remarquer, soit par 
ignorance, soit par manque de temps. 

• Vous avez vu juste, mais les personas ne sont pas utilises par d'autres 
que vous, faute d'avoir implique les gens dans leur creation. 

Creer les personas d'un site web de maniere collaborative vous permet 
done d'eviter de faire fausse route trop longtemps, d'asseoir leur bon droit 
et de renforcer leur adoption par les intervenants qui auront participe a 
leur gestation. 



Methodologie 
Les missions sont la de du persona 

Qu'est-ce qui difference le persona des profils 
d'utilisateurs tels qu'ils sont pratiques dans le 
domaine du marketing ? Le persona a des mis- 
sions, des objectifs, des riches. Dans notre defini- 
tion du persona, nous incluons la notion de 
scenario d'utilisation : a terme, ce que le persona 
doit vous permettre de faire, e'est de dessiner des 
objectifs et un cheminement attendu dans le site, 
que vous utiliserez comme support pour toutes les 
autres methodes : audit (voir le chapitre 6), con- 
ception (chapitres 7 a 9) et evaluation utilisateur 
(chapitres 10 et 11). 



Methodologie 
Les missions d'un persona 
sont propres a ce persona 

Vous devez considerer I'objectif d'un persona 
comme une instanciation d'un objectif generique. 
Par exemple, Acheter un produit se transfor- 
mer en Acheter le dernier livre de Chuck 
Palahniuk, un de ses auteurs favoris. 



Comment definit-on un persona ? 

Les manieres de definir les personas sont tres variees selon les entre- 
prises, les projets, les cibles utilisateur, etc. Void les dimensions que vous 
pouvez definir pour chacun de vos personas : 

• informations socio-demographiques ; 

• relation a la marque, historique client, relation aux concurrents ; 

• habitudes, envies ; 

• objectifs, missions sur le site. 

Parmi ces informations, certaines ne vont servir qua donner de la consis- 
tance a votre persona. Dans l'absolu, chaque detail devrait etre base sur 
une realite que vous avez observee, ou sur laquelle vous avez des donnees 
reelles. Dans la pratique, il arrive souvent de creer ce que Don Norman 
appelle des personas ad-hoc, que vous imaginez a partir de presque rien, 
en brodant sur le peu d'informations dont vous disposez. L'objectif est de 
donner vie a votre persona, de lui affecter des caracteristiques et des buts 
qui vont influencer la maniere dont vous aller concevoir l'interface. Plus 
ces informations seront credibles, plus votre persona aura de chances 
d'etre adopte par l'equipe projet, et done plus il sera utile. 

Attention : une erreur classique lorsque Ton debute dans la conception 
des personas est de commencer par les decrire sur le plan socio-demo- 
graphique. Or ces informations ne doivent intervenir qua la fin de votre 
travail. Le premier critere qui definit un persona, ce sont ses missions, 
ses objectifs sur votre site. Partez done plutot des taches pour descendre 
vers une description de votre persona en tant que personne. Ce dernier 
n'est finalement qu'un pretexte a la realisation des missions. 

Enfin, veillez a ne pas donner a votre persona les objectifs que vous, en 
tant que concepteur, aimeriez qu'il ait. De plus, les objectifs que vous lui 
affectez doivent etre tout sauf generiques. 

Par exemple, s'informer sur les produits n'est pas un objectif, pas plus 
que creer un compte utilisateur. Ces activites sont votre vision des choses, 
mais pas celle de vos personas. Les objectifs d'un persona doivent etre 
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extremement precis et correspondre a un objectif de vie, a ce que les gens 
font reellement. Cela va vous permettre d'aborder le site exactement de 
la meme maniere qu'eux, avec un veritable scenario d'activite a accom- 
plir. Trouvez les raisons pour lesquelles votre persona voudrait s'informer 
sur les produits ou creer un compte utilisateur et contextualisez cet 
objectif general en scenario d'utilisation. 

Voyez ainsi comme les personas peuvent etre precis en termes d'actions a 
mener sur le site a travers cet exemple sur le site d'OSEO, structure 
publique d'aide aux PME : 



Persona [ primaire ] 



I 




Un entrepreneur en situation 
de creation innovante 

qui doit se dinger vers un 
accompagnement par Oseo en 
complement d'un financement 
bancaire classique 



Comportements Internet 

Occurrences de consultation : 



Philippe 

33 ans 
Celibataire 

Montrouge (92) 

Laborantin dans un groupe diagro-alimentaire 

Projet de creation d'entreprise innovante dans le domaine 

du recyclage des matieres polluantes 

Equipement : 

. PC, Windows XP Familial, Internet Explorer 6 
. Ecran 1 7 pour.es, resolution 1 024 x 768 pixels 
. Internet : Wanadoo LiveBox 

Expertise Internet : + 



Relation a Oseo 



Scenarios types : 



. Lieux: exclusivement chez lui 

. Frequence et duree de consultation: environ 2 fois par 

semaine, 20 minutes par consultation 



Philippe n'est pas a I'aise avec Internet et prefere des 
rapports humains plus directs. 

S'il lui semble qu'Oseo peut correspondre a son besoin, il 
va tres vite chercher a obtenir des coordonnees physiques 
d'une agence ou d'un collaborateur Oseo. 



Ne connalt pas Oseo 

A deja entendu parler de I'Anvar, sans savoir exactement de 
quoi il retourne. 

Philippe murit son projet d'entreprise depuis de longs mois, 
et entame la phase de reflexion sur le financement de la 
structure, et les moyens a mettre en oeuvre pour s'assurer 
du bon developpement de son entreprise. 

II n'est pas sur de pouvoir financer I'ensemble du projet sur 
ses fonds propres, et cherche a en savoir plus sur les aides 
publiques ou privees qui pourraient lui convenir. 

II arrive sur le site Oseo suite a une recherche 
generate sur un moteur de recherche avec les 
mots -des suivants: iaide fi nancement entreprise". 



Comprendre si OSEO peut participer au 
financement de son entreprise 

Chercher si OSEO a deja finance le type 
d'entreprise qu'il souhaite creer 



Chercher le numero de telephone d'un 
contact qui puisse le renseigner plus 
precisement grace aux informations des 
sur son projet 



Envoyer I'adresse du site a son futur 
associe afin qu'il puisse I'aider dans 
I'exploration de la piste OSEO 



Figure 4-3 Philippe est un des personas du site d'OSEO. Source : www.oseo.fr 

Communiquer sur les personas 

La meilleure maniere de rater vos personas consiste a les creer et vous 
arreter la. Ne pas en parler revient a les assassiner. Vous seriez alors le 
seul a en profiter. Le benefice des personas provient essentiellement du 
fait qu'ils sont un formidable outil de travail pour une equipe projet, a 
condition que cette equipe soit au courant de leur existence ! 
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Anecdote 
Tous les supports sont bons 

Dans des projets web de grande erwergure, tous 
les moyens sont exploites pour communiquer sur 
les personas : posters, porte-cles, boites de tic-tac, 
fausses cartes a jouer et meme... des personas 
grandeur nature, imprimes tels des mannequins et 
places dans les bureaux : c'est le cas, par exemple, 
chez IconMediaLab a Stockholm. Belle compagnie 
pour les equipes projet ! 



Anecdote 
Les personas aussi font leur buzz... 

Toujours dans la veine des projets haut de gamme, 
des campagnes de communication pro-personas 
sont menees avant leur presentation, afin de pre- 
parer les equipes projet a leur venue et a leur fonc- 
tion. L'accroche de I'annee, « Personas are 
coming » (Les personas arrivent), ou comment 
mettre I'eau a la bouche sans aucune trace de 
profil de persona. 



II ne suffit pas d'envoyer un e-mail a vos collegues en leur signifiant la 
presence d'un document partage presentant les profils des personas. Si 
vous fonctionnez de cette maniere, vous pouvez etre sur que personne, 
meme parmi ceux qui se seront donne la peine de lire votre document, 
n'utilisera jamais les personas. 

Les intervenants d'un projet web sont tous des gens tres occupes. C'est a 
vous de provoquer leur rencontre avec les personas, de leur expliquer les 
benefices de cette methode s'ils ne la connaissent pas, d'imposer leur uti- 
lisation au sein de votre organisation, de leur mettre les profils des per- 
sonas sous le nez, etc. 

La communication autour des personas nest pas un leurre. Elle peut 
certes prendre l'aspect d'un jeu, comme Test d'ailleurs deja la creation 
des profils, mais pourquoi pas ? Peu importe, pourvu que les objectifs 
soient atteints. Et l'objectif de communication des personas est que ces 
derniers servent, qu'ils soient dans tous les esprits, qu'ils existent autre- 
ment que sur le papier. On dispose, pour y parvenir, de deux methodes. 

• Premierement, la communication autour des personas par le biais 
d'actions ponctuelles, comme une reunion de presentation des per- 
sonas a l'ensemble de l'equipe suite a leur creation. 

• Deuxiemement, on peut creer une ambiance projet baignee par les 
profils des personas : imprimez leurs profils, distribuez-les, affichez- 
les dans les salles de reunions, dans les bureaux, dans les couloirs, 
dans les toilettes... Ne parlez plus de « l'internaute », mais de Marie, 
Pierre ou Quentin. Tous ont des besoins differents et ce sont eux qui 
doivent guider la conception. 

La duree de vie des personas peut etre de plusieurs annees. Plus vous les 
connaitrez, plus vous les prendrez en compte et plus votre produit leur 
sera adapte. Pour conclure, ne laissez pas vos personas au fond d'un tiroir 
et faites-les vivre afin qu'ils aient une reelle utilite. 
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Troisieme partie 



Les regies de 
I'ergonomie web 



Vous etes convaincu de l'importance de I'ergonomie et comprenez ses 
objectifs ?* Bravo, mais ce n'est qu'un commencement. En effet, pour 
optimiser I'ergonomie de votre site, vous devez d'abord comprendre les 
principes de base de cette discipline. C'est l'objet de notre chapitre 5. Nous 
verrons ensuite, au chapitre 6, comment vous pouvez utiliser ces 
connaissances a travers la methode de l'audit ergonomique. 
(* Sinon, reprenez du debut !) 



chapitre 
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12 regies pour optimiser 
'ergonomie de votre site 



Lorsque vous attachez de l'importance a l'ergonomie de votre site, 
ce souci doit etre constant : quelles que soient les circonstances, 
vous devez garder en tete les regies de base qui permettent 
d'optimiser un site d'un point de vue ergonomique. 

Ce chapitre vous propose 12 regies qui sont un condense 
des normes, des criteres et de notre experience de l'ergonomie 
web et doivent devenir votre leitmotiv. 



SOMMAIRE 

► Regie n° 1 . Architecture 

► Regie n° 2. Organisation visuelle 

► Regie n° 3. Coherence 

► Regie n° 4. Conventions 

► Regie n° 5. Information 

► Regie n° 6. Comprehension 

► Regie n° 7. Assistance 

► Regie n° 8. Gestion des erreurs 

► Regie n° 9. Rapidite 

► Regie n° 10. Liberte 

► Regie n° 1 1 . Accessibility 

► Regie n° 1 2. Satisfaction de 
votre internaute 



MOTS-CLES 

Regies ergonomiques 

Architecture de I'information 

Navigation 

Charge informationnelle 

Gestalt 

Homogeneite 

Conventions 

Information et feedback 

Vocabulaire 

Guidage 

Affordances 

Erreurs 

Efficience 

Controle utilisateur 

Accessibility 

Satisfaction 



Methodologie 
Et si je saute cette etape ? 

Impossible ! Vous avez forcement en tete des con- 
victions sur ce qui est bon ou pas en termes 
d'ergonomie, ou des habitudes de travail qui ont 
des consequences sur I'ergonomie de votre site 
web (dans le bon ou le mauvais sens). L'objectif de 
ce chapitre est de vous aider a comprendre et a 
assimiler les bonnes pratiques de I'ergonomie 
web. Si vous n'etes pas responsable de la concep- 
tion fonctionnelle, le but est de vous les faire 
appliquer au jour le jour, en complement de votre 
metier. Si vous en etes responsable, ces regies 
deviendront la base de votre metier. 



Les projets web se divisent en deux categories : ceux qui prennent en consi- 
deration les principes d'ergonomie et ceux qui ne les connaissent pas ou ne 
les integrent pas dans leur reflexion. Ignorer ces principes, c'est risquer de 
perdre vos internautes alors meme que ce que vous leur proposez les inte- 
resse. En effet, lorsqu'ils arrivent sur un site qui leur donne du fil a retordre, 
les internautes n'ont qu'une envie : prendre leurs jambes a leur cou. 

Ce n'est qu'en tenant compte des regies de base de I'ergonomie que vous 
pourrez satisfaire vos visiteurs et vous donner une chance de les retenir, 
voire de les faire revenir. 

Ces regies ne s'inventent pas. A leur lecture on peut se surprendre a 
acquiescer en ayant l'impression de ne lire qu'un ensemble de choses 
logiques ; il reste toutefois qu'elles permettent reellement d'ameliorer la 
qualite ergonomique d'une interface. Le grand danger, c'est precisement 
qu'elles paraissent couler de source. C'est a cause de cette simplicity appa- 
rente qu'on les ignore ou qu'on les oublie frequemment. Or elles sont un 
puissant outil de travail pour quiconque fabrique des sites Internet. 



Figure 5-1 

Les regies d'ergonomie permettent d'optimiser 

la qualite d'utilisation d'un site selon un double 

mouvement : d'une part, elles influencent la 

conception (1), d'autre part elles sont un outil 

pour evaluer une interface existante (2). 




Methodologie 
Regies a tout faire 



Mesurer la qualite d'utilisation ponctuellement et 
s'en occuper au quotidien sont des activites tres 
differentes. Cependant, elles exploitent les memes 
ressources, a savoir les regies permettant d'eva- 
luer le niveau de qualite ergonomique relatif a un 
choix d'interface. Ce sont ces regies que nous vous 
presentons dans ce chapitre. 



Vous voulez que votre site Internet respecte les principes consensuels de 
I'ergonomie web afin que vos internautes s'y sentent bien ? Void 12 
regies vous permettant de concevoir et d'evaluer votre site en tenant 
compte de I'ergonomie. 

Ce chapitre ha pas pour vocation de passer en revue de maniere exhaus- 
tive toutes les erreurs possibles, mais plutot d'illustrer par l'exemple cha- 
cune des regies et son application. Nous en donnons des modeles positifs 
et negatifs sur une multitude de sites web tres differents. Vous verrez ainsi 
qu'un site tres bien fait par ailleurs peut, a un moment donne, mettre en 
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defaut une des regies. Cela vous permettra de comprendre encore mieux 
que c'est seulement en optimisant tres precisement chacune des pages de 
votre site que vous pourrez atteindre une bonne qualite ergonomique 
generale. II n'y a pas de secret, mais uniquement une prise en compte 
minutieuse et rigoureuse de chacun des principes de 1'ergonomie web. 

Enfin, gardez bien a l'esprit que le decoupage propose ici est uniquement 
utilitaire, dans le sens ou il permet d'aborder 1'ensemble des thematiques 
les unes apres les autres. Cependant, dans leur mise en pratique sur un 
site web, toutes ces regies s'imbriquent les unes dans les autres. Vous 
verrez d'ailleurs a la fin de ce chapitre que, pour satisfaire pleinement un 
principe ergonomique, vous serez parfois contraint de mettre en defaut 
un autre principe. Nous illustrerons ce type de conflits au travers de 
quelques exemples concrets. Dans ces situations de compromis, les spe- 
cificites de votre projet vous aideront a prendre les meilleures decisions 
possibles. 

Mais passons aux choses serieuses et voyons done comment vous pouvez 
aider vos internautes a se sentir bien sur votre site Internet ! 



Point devue 
Oui, <;a arrive a tout le monde ! 

L'application des regies ergonomiques sur la tota- 
lity d'un site necessite des connaissances et de 
I'acharnement. C'est en appliquant un ensemble 
de recommandations que Ton peut croire etre des 
details que vous atteindrez une qualite ergono- 
mique irreprochable. 



i 
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Regie n° 1. Architecture : le site est bien range 

Commencons avec la regie d'architecture : pour que votre site serve a vos 
internautes, encore faut-il qu'ils puissent y trouver ce qui les interesse. Vous 
atteindrez cet objectif en rangeant les informations de votre site de telle 
maniere que vos internautes localisent rapidement ce qu'ils recherchent. 



I Accueil^ 1 1 — 
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Ratea 
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Figure 5-2 

Lorsque I'architecture de I'information d'un site est bien 
pensee, les internautes arrivent facilement a leurs objectifs. 
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Dans ce livre Toutsavoir 
sur I'architecture de I'information 

Pour aller plus loin dans la comprehension et la 
mise en pratique de I'architecture de I'information, 
nous y avons consacre un chapitre entier. Au 
chapitre 8, vous pourrez done decouvrir comment 
les internautes naviguent sur I'lnternet et de 
quelle maniere I'architecture de I'information peut 
vous aider a vous adapter a ces comportements. 
Nous verrons aussi comment organiser vos con- 
tenus, realiser des plans de site et choisir le voca- 
bulaire qui traduira cette architecture dans 
I'interface. 



VOCABULAIRE 
Grouper = Categoriser 

Vous verrez au chapitre 8 que I'activite de catego- 
risation consiste a creer des groupes de contenus. 
Nous utiliserons done indifferemment les termes 
de groupes, regroupements ou categories. 



Architecturer I'information d'un site est un travail qui doit etre decorrele 
de la presentation des informations dans les pages. Vous devez trouver la 
meilleure maniere d'organiser votre contenu en vue de le presenter a vos 
internautes. Nous verrons au chapitre 8 que cela necessite un travail de 
categorisation (vous creez des groupes de contenus) puis de structuration 
(vous decidez de I'architecture de votre site en hierarchisant les con- 
tenus). Ces deux etapes doivent absolument tenir compte des attentes de 
vos internautes et de leurs reflexes de navigation. 

Les regroupements sont logiques 

Tout d'abord, si vous decidez de grouper des contenus, il faut que ce 
regroupement ait un sens. Vous ne pouvez pas simplement juxtaposer 
des elements pour former une rubrique sous peine de voir vos inter- 
nautes chercher en vain des informations. 

Le sens de vos regroupements est d'autant plus important du point de 
vue de l'utilisateur que ce dernier s'arrete tres tot dans le processus de 
lecture des titres de rubriques. En fait, une fois qu'il croit avoir saisi le 
contenu d'une rubrique, il passe a la lecture de la suivante. Or les utilisa- 
teurs pensent avoir compris en un ou deux mots, puisqu'ils sont habitues 
a ce que les regroupements dans les menus reposent sur des apparie- 
ments de contenus. Autrement dit, ils s'attendent a ce que vous ayez mis 
ensemble ce qui va ensemble (ce en quoi ils ont raison). 



Figure 5-3 

Sur le site de SFR Music, le fait de regrouper 

les genres World, Jazz et Classique dans 

la meme rubrique a peu de sens 

d'un point de vue utilisateur. 

Source : www.sfr.fr 
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Les mots ne doivent done pas etre un moyen de contourner un defaut de 
categorisation. Ne tablez pas sur une redaction explicite du titre de 
rubrique pour en decrire le contenu, parce que vos internautes ne liront 
pas forcement ce titre de maniere tres attentive. Par exemple, sur le site 
de SFR Music (figure 5-3), les styles World, Jazz et Classique sont 

regroupes dans la meme rubrique. II s'avere que, lorsqu'ils parcourent ce '■§. 

menu avec l'objectif de trouver un morceau de Mozart, 75 % des inter- 
nautes ne voient pas le mot Classique a la premiere lecture. Certains ont 
besoin de 3 passages et d'autres ne le voient jamais, allant chercher 
Mozart dans Varietes Internationales, faute de mieux. 



Soyez done tres vigilant, puisqu'un defaut de categorisation peut vous 
faire perdre votre internaute tres rapidement. Mais optimiser l'architec- 
ture de votre site n'est pas juste une histoire de groupements. Voyons 
comment vous devez aussi structurer vos contenus pour aider vos inter- 
nautes dans leurs recherches. 

La structuration met en avant les contenus des 

Une bonne architecture se traduit, en termes de navigation, par un par- 
cours fluide qui passe inapercu aux yeux des visiteurs. Pour que cela soit 
verifie le plus souvent possible, vous devez mettre en avant les pages ou 
fonctionnalites les plus recherchees par vos internautes. 

Prenons pour exemple le site de Nespresso : une grande partie des inter- 
nautes s'y rend pour commander des capsules de cafe. Or, mis a part sur la 
page d'accueil, il est tres difficile de trouver comment y parvenir. II est 
probable qu'une partie des internautes, une fois arrives a l'interieur du site, 
auront du mal a comprendre comment commander en ligne. lis auront 
alors deux types de reaction : soit ils reviennent a l'accueil, soit ils partent 
du site en pensant qu'il est impossible d'acheter des capsules en ligne. 

Ceci est du a un defaut de structuration, qui fait que l'achat en ligne est 
« cache » a un niveau 2 de profondeur (e'est une sous-rubrique de la 
rubrique Club Nespresso). L' architecture du site devrait etre pensee pour 
faire remonter cette fonctionnalite au premier niveau. En outre, le 
regroupement au sein de cette rubrique a certes un sens dans la culture 
d'entreprise Nespresso et la relation clients offline, mais il pose probleme 
sur le Web puisqu'il rend totalement invisible la fonctionnalite d'achat 
de capsules : pourquoi l'internaute irait-il acheter du cafe dans une 
rubrique qui semble jouer un role communautaire ou etre reservee a des 
clients privileges ? Cet exemple recoupe done aussi des problematiques 
de comprehension du vocabulaire que nous traiterons par la suite. 
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\espresso 



Le Concept NESPRESSO j Les Grands Cms 




Les benefices diu ctub 



Figure 5-4 Sur le site de Nespresso, la rubrique Commandez vos capsules est « cachee » dans un sous-niveau 

de I'architecture. Ce defaut est accentue par I'appellation de la rubrique de niveau superieur, Le club NESPRESSO, 

qui n'indique en rien que Ton puisse y acheter des capsules de cafe. Source : www.nespresso.fr 



Point devue 

Le menu de navigation 

transforme I'abstrait en concret 

Les menus sont la traduction en termes d'interface 
de vos choix d'architecture de I'information. lis 
refletent done a la fois les principes de categorisa- 
tion et de structuration. 



Les menus aident l'internaute a naviguer dans 
les contenus 

Les intemautes se deplaceront dans I'architecture que vous avez concue 
grace aux elements de navigation. Les menus en font partie et sont 
parmi les plus difficiles a concevoir. Lorsque vous les preparez, vous 
devez veiller a ce que vos internautes puissent choisir facilement, parmi 
l'ensemble des items du menu, celui qui les interesse. Pour cela, les inti- 
tules de vos menus doivent respecter les 3 criteres suivants : 

• Etre signifiants : lorsque l'internaute lit un intitule, il doit com- 
prendre ce qu'il recouvre et pouvoir deviner le type de contenus 
appartenant a la rubrique. Nous evoquerons plus precisement les pro- 
blematiques de justesse du vocabulaire dans la regie n° 6. 

• Etre complementaires : la somme de tous les items du menu doit 
recouvrir tout ce que le site propose a ses internautes. II ne doit pas 
exister de contenu n'appartenant a aucune des rubriques. 
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Sur le site de la Camif, on pouvait trouver 

les produits Image et Son a la fois 

dans I'univers Loisirset dans celui de la 

Maison. Cela permettait aux internautes qui 

allaient chercher un televiseur de le trouver 

du premier coup, qu'ils se dirigent spontane- 

ment vers I'un ou I'autre des univers. 

Source : ancien site www.camif.fr 
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Etre exclusifs : vos internautes doivent pouvoir choisir entre deux items 
sans hesiter. Vous devez done eviter toute ambiguite et respecter le critere 
d'exclusivite : un intitule doit etre le seul envisageable pour l'internaute 
qui cherche un contenu precis. Si vous ne suivez pas cette recomman- 
dation, vous devrez alors dupliquer les acces a certaines rubriques. 
C'etait notamment le cas sur l'ancien site de la Camif (figure 5-5). 
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Contourner un site mal range 

Si vous vous rendez compte que l'architecture de votre site est inadaptee 
aux besoins de vos internautes mais que vous ne pouvez rien y faire (cela 
peut etre le cas si votre marge de manoeuvre est tees reduite et/ou si l'archi- 
tecture de votre site vient justement d'etre remaniee), essayez de la con- 
tourner grace a des liens transversaux places au cceur des pages. 

Ces liens vous aideront a mettre en relation des contenus entretenant des rap- 
ports etroits, sans que ceux-ci n'apparaissent explicitement dans l'arborescence. 

Reprenons l'exemple du site de Nespresso, et mettons que vous en soyez 
le responsable. Vous savez que la fonctionnalite d'achat en ligne est trop 
enfouie dans l'arborescence, vous devez alors chercher les endroits-cles 
ou proposer un lien direct vers cette derniere. Ce lien agira comme un 
raccourci afin de pallier une architecture de l'information quelque peu 
defaillante. C'est deja ce qui est mis en place sur la page d'accueil, mais 
ce n'est pas suffisant. Par exemple, il paraitrait tout a fait logique de 
fournir un lien vers l'achat dans les fiches de presentation des capsules, 
d'autant que Ton specifie un prix pour chacune des capsules. C'est done 
l'endroit reve pour encourager l'achat en ligne ! 



Definition 
Lien transversal 
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Un lien tranversal est un lien qui passe outre 
l'arborescence du site. II propose, a des endroits 
appropries, des liaisons directes vers des contenus 
en rapport avec les informations consultees. 
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Figure 5-6 

Sur les fiches produit du site Nespresso, un lien 
transversal vers l'achat en ligne permettrait de 
compenser le manque de visibility de cette fonc- 
tionnalite dans le menu de navigation principal. 
Source : www.nespresso.fr 
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Regie n° 2. Organisation visuelle : 
la page est bien rangee 

La seconde regie concerne toujours le rangement mais elle s'applique 
aux pages du site qui doivent, elles aussi, etre bien organisees. Cet 
objectif general d'un site web est facilement comprehensible puisqu'il 
s'applique aussi a tout ce qui nous entoure dans la vie reelle. En general, 
nous nous en sortons mieux dans des environnements simples, organises 
et aeres. Considerez la page web comme un environnement a part 
entiere et essayez d'y faire le menage. 

Sur un site web, pour donner l'impression que votre page est bien 
rangee, vous devez suivre plusieurs recommandations. Elles ont toutes 
pour objectif de liberer l'esprit de votre internaute, en limitant la charge 
mentale liee au traitement de ce qu'il voit a l'ecran. 



Un peu de psychologie 
La notion de bruit visuel 



Les elements inutiles sur line page web agissent 
comme autant de bruit visuel, qui vient perturber 
la simplicity de la page. L'internaute a done plus de 
mal a se concentrer sur ce qui I'interesse. 



Eviter le trop-plein (('informations 

Tout d'abord, ne surchargez pas vos pages d'informations inutiles. Vous 
devez privilegier l'essentiel, afin que l'utilisateur n'ait pas a integrer trap 
d'elements a la fois. 

En effet, meme si votre internaute n'utilise pas toutes les informations 
d'une page, ce sont neanmoins des elements qu'il va devoir traiter men- 
talement. II peut done y avoir un trop-plein d'informations sans pour 
autant gener consciemment les internautes. Resoudre ce type de defaut 
ameliorera cependant l'interface : elle paraitra plus claire, plus aeree, 
plus simple. A l'inverse, lorsque la difficulte de traitement mental des 
informations a l'ecran apparait de maniere consciente a l'utilisateur, vous 
avez un grave probleme ! 

Epurez done vos pages en supprimant tout ce qui ne sert a rien. Atten- 
tion, il ne s'agit pas de supprimer du contenu, gage de qualite d'un site 
Internet, mais plutot tout ce qui, sur la page en question, n'a pas d'utilite 
pour l'internaute. De meme, il ne s'agit pas forcement de supprimer des 
fonctionnalites interessantes, mais d'eviter celles qui, ne servant absolu- 
ment pas ou peu a l'internaute, ne peuvent que surcharger l'interface 
visuellement. 



Diviser la quantite de mots par deux 

Un des conseils recurrents pour la redaction web consiste a diviser la 
quantite de mots par deux. Cette regie est tout a fait conditionnelle et ne 
se refere pas a un resultat scientifique precis. Elle est toutefois basee sur 
un constat empirique : on arrive en general relativement facilement a 
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reduire la quantite de mots d'un texte d'au moins 50 %. Cette recom- 
mandation sert done plutot a orienter votre maniere d'ecrire sur le Web 
en vous focalisant sur les mots essentiels. 



Citation Pour Crawford Kilian, I'ecriture web est un veritable combat ! 



Crawford Kilian resume parfaitement dans cette phrase la 
necessite d'etudier la pertinence de chaque mot utilise : 
« Every sentence, every phrase, every word has to fight for its 
life » {Chaque phrase, chaque expression, chaque mot doit se 
battre pour exister). 

Pour en savoir plus, n'hesitez pas a lire son ouvrage consacre 
a I'ecriture web, dont la 3eme edition est parue en 2007 : 
CO Crawford Kilian, Writing for the Web 3.0, 
Self-Counsel Press, 2007 
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A SAVOIR 
On lit aussi sur le Web 



Attention, cette regie, qui permet de s'adapter aux modes de lecture sur 
le Web, n'est valable que sur les pages navigantes et non sur les pages 
finales de contenu. Elle permet en effet d'obtenir des interfaces bien 
concues pour l'activite de scan visuel, a laquelle les internautes font appel 
pour reperer des mots cles sur une page web : ils la parcourent en diago- 
nale afin d'identifier rapidement ce qui peut correspondre a l'informa- 
tion recherchee. A l'inverse, elle est tout a fait contre-indiquee sur les 
pages de contenu final (comme un article, un descriptif produit, la bio- 
graphie d'un artiste, etc.), ou le parcours visuel revient a la normale. Sur 
ce type de pages, n'essayez pas de reduire le volume textuel a tout prix, 
sous peine de reduire aussi la qualite de votre contenu ! 

Pour vous adapter au reflexe de scan visuel, vous devez done supprimer 
les mots inutiles, surtout dans les pages de haut niveau et dans les ele- 
ments de navigation. Surveillez tout particulierement les libelles de vos 
menus de navigation : ils doivent etre assez concis pour ne pas aug- 
menter inutilement la charge visuelle et la charge mentale relative au 
traitement de l'information percue. 

Observez ainsi le site d'ExtraFilm : la suppression du mot Commander dans 
tous items de la navigation principale rendrait cette barre de navigation 
beaucoup plus claire. 



L'activite de scan visuel n'est pas le seul mode de 
parcours des pages web par I'ceil. 
La derniere etude du Poynter Institute sur la consul- 
tation d'actualites en ligne (2007) nous apprend 
ainsi qu'une fois que le contenu recherche est iden- 
tified le processus de lecture n'est plus de type scan 
et le parcours oculaire revient a la normale. 77 % 
du texte est alors lu et non parcouru (ce resultat 
peut etre considere comme tres fiable, puisqu'il 
etait deja de 75 % lors de leur precedents etude). 
Vous avez done le droit d'ecrire de longs textes ! 
Bien sur, vous devrez optimiser I'utilisabilite de ces 
derniers pour compenser leurs defauts. Mais, sur- 
tout, ne penalisez pas la qualite de votre contenu 
par I'application rigide des regies d'ecriture web. 

Pour aller plus loin, n'hesitez pas a consulter le site 
de cette derniere etude passionnante du Poynter 
Institute, comparant la lecture d'actualites sur 
papier et en ligne : 

► http://eyetrack.poynter.org 

II est possible d'acheter le rapport complet en 
ligne. Vous pouvez aussi consulter gratuitement 
leur etude de 2004 : 

► http://www.poynterextra.org/eyetrack2004 

Absorbez ces donnees avec toutes les precautions 
necessaires. Gardez notamment toujours a I'esprit 
que les resultats ont ete obtenus sur des sites de 
journauxen ligne. 
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Figure 5-7 

Sur le site d'Extrafilm, la repetition du mot 
Commander dans tous les intitules du menu 
surcharge I'interface et complique le processus 
de selection mentale d'un des items. 
Source : www.extrafilm.fr 
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Etant donne que ce mot s'applique a tous les items de la navigation, on 
ne doit avoir aucun scrupule a le supprimer. Toutefois, s'il est indispensable 
pour que les internautes comprennent que sur ExtraFilm ils peuvent 
Commander divers articles photo, on ecrira ce terme une seule fois et on 
usera d'un artifice graphique pour le lier a l'ensemble des items de cette 
barre de navigation. 

Dans certains cas, cette chasse aux mots inutiles peut meme vous 
amener a supprimer tout un paragraphe. Observez ainsi comme sur le 
site d'Une Piece en Plus, il n'y a aucun interet a expliquer aux gens com- 
ment acceder au detail d'un site et ce qu'ils trouveront sur la page sui- 
vante. En exagerant, c'est un peu comme si vous ajoutiez une legende 
« Cliquez sur le bouton Valider pour valider » a un bouton Valider. 



Figure 5-8 

Dans cette page du site Une Piece en Plus, on 

peut se permettre de supprimer le texte 

Cliquez sur les puces rouges pour faire appa- 

raftre les caracteristiques detaillees du centre 

de votre choix ou pour obtenir un plan d'acces 

sans que cela penalise I'internaute. 

Source : www.unepieceenplus.com 
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Dans cet exemple, on est oblige d'aj outer une legende pour venir com- 
penser le defaut d'interface suivant : pour acceder au detail d'un site, 
I'internaute ne doit pas cliquer sur son nom mais sur la puce rouge qui 
l'accompagne. C'est done une mauvaise conception de l'interface de 
selection qui dicte la necessite d'aj outer un texte explicatif. Or c'est fonc- 
tionner a l'envers. De plus, il y a fort a parier que tees peu d'internautes 
lisent ce texte : la plupart se dirigera immediatement vers la carte geo- 
graphique pour choisir le site qui les interesse. 
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Essayez done de remettre en question l'utilite du texte pour vos inter- 
nautes sur toutes les pages de votre site. Dans de nombreux cas, si vous 
avez besoin de legendes, e'est que votre interface n'est pas assez intuitive. 
Commencez par optimiser sa facilite de prise en main et ne l'accompa- 
gnez d'un texte que si e'est vraiment necessaire. 

Enfm, essayez de preter attention a chaque detail, chaque element que vous 
pourriez supprimer parce qu'il n'apporte rien d'interessant a vos inter- 
nautes. En faisant de la sorte, vous allez clarifier votre page qui s'en 
trouvera beaucoup plus facile a apprehender par vos internautes. 
Demandez-vous done toujours si chaque element a sa place au sein de votre 
page. Ce n'est vraiment qu'en fonction des specificites de votre site et des 
besoins de votre lectorat que vous pourrez prendre des decisions de ce type. 

Ces specificites rendent ainsi l'indication de la date du jour justifiee sur 
le site du quotidien Le Monde, mais absolument inutile sur le site de 
l'editeur Actes Sud. Dans ce second cas, la presence de la date est meme 
ambigue car elle peut sembler indiquer une mise a jour du site, ce qui 
n'est pas forcement le cas. 
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Figure 5-9 

L'indication de la date du jour 
est pertinente sur le site d'un 
quotidien en ligne. 
Source : www.lemonde.fr 
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Figure 5-10 

L'indication de la date du jour est inutile et peut induire en 
erreur sur le site d'un editeur, qui n'est pas forcement mis 
a jour quotidiennement 
Source : www.actessud.com 
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Recommandation 

Les elements optionnels doivent 

etre affiches sans recharger la page 

Attention : ce type de comportement d'interface 
n'est recommande que s'il ne necessite pas de 
recharger la totalite de la page. 
Dans le cas contraire, il perd toute son utilite a 
cause des problemes d'interaction consecutifs au 
rechargement (perte des reperes visuels et du con- 
texte de la page, latence technologique qui reduit 
la fluidite du processus mental...). 



Figure 5-1 1 

Sur le site de Mappy, les options liees 

aux vehicules n'apparaissent pas lorsque 

I'internaute a selectionne Pieton. 

Source : www.mappy.fr 



N'aff icher que les principaux elements de navigation 
et d'interaction 

Reduire le trop-plein d'informations ne concerne pas uniquement le 
texte. Vous devez aussi surveiller l'utilite de tous les elements que vous 
affichez dans votre page et comparer celle-ci a la charge information- 
nelle qu'ils imposent a I'internaute. Ce travail doit notamment etre 
mene sur les elements de navigation et d'interaction. 

Afficher les elements optionnels seulement si necessaire 

Dans une interface transactionnelle, ou I'internaute interagit avec le site, 
vous devez penser a adapter l'interface au comportement et aux besoins 
de l'utilisateur. II est frequent de proposer a l'ecran toutes les options 
possibles alors que l'affichage de certaines d'entre elles pourrait etre 
effectue dans un second temps. 

Prenons un exemple concret : sur le site de Mappy, les options ne con- 
cernant que les transports motorises (Voiture-Express ou Sans peage) 
n'apparaissent que si l'option Vehicule est cochee : 
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Dans le meme ordre d'idees, lorsque I'internaute achete un jeu sur le site 
de Reservoir Jeux, il renseigne ses coordonnees : le formulaire relatif a 
l'adresse de facturation apparait uniquement s'il coche le bouton radio 
differente de l'adresse de livraison. 
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Figure 5-12 

Sur le site de Reservoir Jeux, le formulaire 
de saisie de I'adresse de facturation n'apparatt 
que si I'internaute en a besoin. 
Source : www.reservoir-jeux.com 
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Supprimer les elements d'interaction inutiles 

On peut aussi supprimer certains elements parce qu'ils sont inactifs et 
n'ont done aucune utilite pour I'internaute. En effet, il est tres frequent 
de trouver des elements inutiles sur une page donnee parce que Ton a 
applique sur toutes les pages des regies techniques identiques. 

Par exemple, lorsque votre internaute se trouve sur la derniere page 
d'une liste, il est tout a fait superflu de lui proposer un lien Suivant, 
meme si ce dernier n'est pas cliquable. En supprimant ce lien dans la 
derniere page, vous reduirez la charge informationnelle et inciterez votre 
utilisateur a comprendre qu'il n'y a plus rien apres, done qu'il se trouve 
sur la derniere page. 



1 2 3 4 5 ... 50 suivarlte i 



- precedente 1_... 45_ 46 47^ 48_ ... 5£ suivante > 



: precedente 1_... 46 47 48 49 50 



Figure 5-13 Les liens vers les pages suivante et precedente ne doivent etre affiches que 
s'ils correspondent a une possibility de navigation. Ainsi, si Ton se trouve sur la premiere 
page d'une liste, il est inutile de fournir un lien precedente. De meme, si Ton se trouve sur 
la derniere page d'une liste, il est inutile de fournir un lien suivante. 



N'afficher que les elements d'interaction les plus utiles 

Enfm, on peut eliminer certains elements s'ils sont tres peu utiles au vu 
du comportement des internautes. 

Toujours a propos de la navigation dans des pages de listes, prenons 
l'exemple d'une liste decoupee en 25 pages. Dans la plupart des cas, vous ne 
devez pas afficher les liens directs vers les 25, mais plutot utiliser un schema 
de navigation sur 5 pages directes, augmente de liens directs vers la pre- 
miere et la derniere pages, ainsi que vers les pages precedente et suivante. 
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Cette recommandation est toutefois dependante du contexte et de l'uti- 
lite de votre liste de resultats. Si cette derniere constitue le coeur de votre 
site (c'est par exemple le cas pour un moteur de recherche generaliste), il 
devient tres utile pour vos internautes de disposer de plus de possibilites 
de navigation entre les pages de resultats. 

Differencier les quantites d'informations reelles et pergues 

La quantite d'informations seule ne peut suffire a definir la charge infor- 
mationnelle de votre site. Cette derniere peut paraitre plus importante 
pour l'internaute en fonction des animations, images de fond et de 
l'heterogeneite visuelle. 

L'heterogeneite visuelle augmente la charge informationnelle 

Surveillez ce point : globalement, plus vous avez de typographies et de 
couleurs differentes, plus vous augmentez la charge informationnelle de 
votre page (alors que la quantite d'informations calculee strictement en 
pixels ne change pas). 

Les images de fond augmentent la charge informationnelle 

La charge informationnelle peut aussi venir d'elements graphiques pol- 
luant le contenu. C'est par exemple le cas des images de fond, a proscrire 
lorsqu'elles sont mal utilisees. Souvent, l'utilisation de telles images pose 
des problemes de lisibilite des contenus. Observez ainsi cet exemple sur 
le site de Warner Music. 



Figure 5-14 

Sur le site de Warner Music, 

l'utilisation d'une image de fond rend 

presque invisible des elements de 

navigation primordiaux (tels que 

Genres, Recherche dans la barre 

de navigation principale, 

ou Le catalogue au centre 

de la page). 

Source : www.warnermusic.fr 
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Les animations augmentent la charge informationnelle 

Enfin, tenez compte du fait que les animations augmentent le volume 
d'informations a traiter pour votre internaute. Ainsi, bien qu'une anima- 
tion prenne la meme place a l'ecran qu'un contenu statique, elle ne pos- 
sede pas la meme charge informationnelle. 

Le traitement de l'animation demande beaucoup de ressources mentales 
car nous sommes intuitivement diriges vers son exploration : quelque 
chose qui bouge attire notre attention. L'internaute doit done engager 
des processus mentaux afin d'ignorer les animations qui ne correspon- 
draient pas a son besoin. 
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Figure 5-15 

Cette publicite pour Gaz de France sur le site 
de Se Loger est une animation : le message 
s'affiche de maniere dynamique en plusieurs 
ecrans successifs. 
Source : www.seloger.com 
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Si vous devez proposer des bannieres animees (que ce soit pour presenter 
de la publicite externe ou faire votre propre promotion), veillez done a 
deux choses : 

• Inanimation ne doit pas tourner en boucle en permanence. Si vous ne 
pouvez faire autrement, fournissez au moins un moyen de la stopper. 

• Ne proposez pas d'animations simultanees car cela demande a 
l'internaute de partager son attention et il lui sera d'autant plus diffi- 
cile de les ignorer. 

Faites bien la difference entre l'animation a proprement parler (e'est-a- 
dire un message presente de maniere dynamique, decompose en parties 
successives) et la presentation de differents contenus au meme endroit. 
Par exemple, la publicite pour Gaz de France sur le site de Se Loger 
(figure 5-15) est une animation. A l'inverse, le systeme d'auto-promo- 
tion sur le site de Virgin Mega (figure 5-16) repose sur un principe 
d'affichage successif de contenus statiques. 




lMffl'r*lB.& 



Figure 5-16 

Sur le site de Virgin Mega, un espace 

est reserve pour I'affichage successif de 

differentes mises en avant statiques. 

Autrement dit, le cote « anime » provient 

exclusivement du fait qu'une mise en avant 

remplace la precedente a I'ecran. 

Source : www.virginmega.fr 
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Dans ce dernier cas, la charge de traitement mentale dependra du temps 
d'affichage de chacun des messages. Plus ce temps est court, plus l'inter- 
naute a d'informations a traiter et plus c'est difficile pour lui. 

Demultiplier la valeur du pixel carre 

II existe une maniere detournee de limiter le trop-plein d'informations, 
en abritant successivement plusieurs contenus dans la meme zone. C'est 
d'ailleurs le principe adopte dans notre exemple precedent sur le site de 
Virgin Mega. L'espace ecran est un espace virtuel qui s'avere tres flexible 
pour presenter des informations a l'ecran. Plusieurs techniques peuvent 
etre utilisees, avec plus ou moins d'interet pour les internautes. 

Le remplacement d'informations au die 

Vous pouvez utiliser des precedes techniques bases sur le rechargement 
partiel de portions d'ecran. De cette maniere, on peut « cacher » des 
informations qui restent accessibles tres facilement en un clic. C'est sou- 
vent le cas des interfaces presentees sous forme d'onglets. Par exemple, 
sur le site de Cote Maison, la meme zone ecran accueille les articles les 
plus lus et les diaporamas les plus vus. 



Recommandation 

Le rapport entre scroll 

et le trop plein d'informations 

Attention, la charge informationnelle se mesure 
plutot en termes d'ecran que de page, e'est-a-dire 
qu'elle est surtout basee sur la quantite d'informa- 
tions que I'internaute voit a la fois. 
La hauteur de vos pages ne participe qu'en partie 
a la charge informationnelle. 
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Figure 5-17 

Sur le site de Cote Maison, un seul espace permet d'afficher 
deux types de contenus. Les internautes peuvent passer 
de I'un a I'autre en cliquant sur les onglets correspondants. 
Source : www.cotemaison.fr 
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De meme sur la page d'accueil du site American Express, ou des infor- 
mations cles sur 4 cartes de paiement sont disponibles par un simple clic 
dans le meme espace. 



Figure 5-18 

Sur le site d'American Express, un seul 

espace permet d'afficher quatre types 

de contenus. Les internautes peuvent 

naviguer parmi ces contenus en cliquant 

sur les onglets correspondants. 

Source : www.americanexpress.fr 
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Le remplacement d' informations au rollover 

II existe des interfaces comparables a celles que Ton vient d'evoquer, 
mais dans lesquelles le changement de contenu se fait au rollover. Dans 
ce cas, Taction de l'internaute pour afficher une information n'est plus de 
l'ordre du clic, mais du survol de souris. Ainsi, sur le site d'IBM, cinq 
classes d'informations sont presentees dans la meme zone grace a un 
affichage au survol de la souris sur les onglets. 

Ce type d'interaction fonctionne mieux lorsque le systeme n'est pas trap 
sensible et ne reagit pas immediatement au moindre survol de la souris. 
C'est le cas sur le site d'IBM ou l'affichage au survol est tres bien gere. 
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Figure 5-19 Sur le site d'IBM, un seul espace permet d'afficher cinq types de contenus. Les internautes peuvent 
naviguer parmi ces contenus en survolant les onglets correspondants. Source : www.ibm.fr 

L'apparition d'informations au rollover 

Vous devez faire la distinction entre le remplacement et X apparition d'infor- 
mations au rollover. La principale difference entre ces deux precedes est que 
le premier est capable de suggerer que d'autres informations sont affi- 
chables dans une zone deja remplie par un type d'informations donne. 

L'apparition d'informations au survol peut etre tout a fait indiquee si 
vous savez que vos internautes vont survoler certains elements, et que 
vous souhaitez les aider a ce moment precis. Ainsi, sur la page d'accueil 
du site de Toyota, des informations supplementaires s'affichent au survol 
des noms de modeles. 
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Figure 5-20 Sur la page d'accueil du site de Toyota, 
le survol des noms des modeles permet d'afficher 
quelques informations supplementaires, et notam- 
ment la photo du vehicule correspondant. 
Source : www.toyota.fr 
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Ces informations, notamment le visuel du vehicule, agissent comme un 
facteur d'aide a la decision. Autrement dit, il est plus facile de decider 
que je vais cliquer sur Corolla Verso si je reconnais que c'est bien le type 
de voiture que je cherche. De maniere generale, ces affichages au survol 
sont interessants pour donner plus d'informations a l'internaute qui doit 
choisir sur quoi cliquer. Cependant, il faut veiller a ne pas y cacher des 
informations indispensables a vos visiteurs. Dans certains sites, ce sont 
des pans entiers de contenus qui apparaissent uniquement si, par chance, 
l'internaute survole l'element declenchant leur affichage. Dans ce cas, 
soit un espace est reserve a cet affichage (il reste done vierge si l'inter- 
naute ne survole pas l'element declencheur), soit les informations sont 
affichees par-dessus le reste de la page. Ces interfaces presentent regu- 
lierement les defauts suivants : 

• Les informations n'apparaissent qu'au rollover. Elles ne sont done pas 
disponibles en apprehension directe, immediate. L'internaute doit 
accomplir une action pour les lire. Encore faut-il qu'il l'accomplisse 
effectivement. 

• La possibilite de faire apparaitre des informations au rollover n'est 
pas toujours evidente. Les internautes risquent done de les manquer 
parce que leur souris n'a pas survole les elements en question. Plus les 
elements declencheurs sont grands, plus votre interface sera efficace : 
les internautes pourront en effet difficilement passer a cote du meca- 
nisme d'affichage au survol. 

Par exemple, sur le site de l'editeur Didier Jeunesse, il n'est pas forcement 
evident que le titre des rubriques puisse apparaitre au survol des ceufs. 



Figure 5-21 

Sur le site de Didier Jeunesse, les titres de 

rubriques n'apparaissent que lorsqu'on survole 

les oeufs correspondants. 

Source : www.didierjeunesse.com 
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Parfois, les informations apparaissant au rollover sont elles-memes 
invisibles pour l'internaute, parce qu' elles sont trop peu visibles ou 
trop loin de l'element declencheur. Plus la distance est importante, 
plus le risque est grand que l'internaute ne remarque pas l'affichage 
de l'information. Observez ainsi l'exemple suivant sur le site du fes- 
tival d'lle de France. 
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Figure 5-22 Sur le site du festival d'lle de France, la ville s'affiche au survol de I'evenement, mais dans une zone situee tout en bas de page. 
On risque done que les internautes ne voient pas cette information du fait de son eloignement de I'element declencheur. 

Source : www.fidf.fr 

L'apparition d'informations au rollover peut etre delicate a gerer du 
point de vue de rinteraction avec la souris. II faut faire attention a 
conserver son pointeur de souris sur la source sous peine de perdre 
Finformation affichee. Selon Fimplementation technique, l'interface 
sera done plus ou moins difficile a utiliser. Plus Finformation presentee 
au rollover est concise, moins e'est grave, car elle peut alors etre lue 
rapidement. 

Cet argument explique pourquoi les affichages au rollover sont tres 
perturbants pour une certaine categorie d'internautes, notamment les 
moins experimentes. Les seniors sont, par exemple, une frange de la 
population pour laquelle vous devez eviter ce type de precede. Lorsqu'ils 
voient apparaitre une information sans qu'ils aient clique, ils s'imaginent 
avoir fait une betise et ne comprennent pas toujours les raisons de ces 
modifications. Preferez done les interactions a base de clics. 

Enfin, en soi, Faffichage au rollover rend la lecture difficile. C'est 
d'autant plus le cas que Finformation affichee est loin de la source sur 
laquelle vous avez passe votre souris. En effet, vous devez alors naviguer 



109 



Aller plus loin 

La publicite vue 

sous Tangle ergonomique 

Pour en savoir plus sur le traitement de la publicite 
du point de vue de I'ergonomie, vous pouvez lire 
cet article d'Ergolab : il vous donnera des pistes 
pour I'integrer de maniere raisonnee et en agres- 
sant le moins possible vos internautes. 
Publicite sur le Web : que fait I'ergonomie ? 
A consulter sur : 

► http://www.ergolab.net/articles/publicite- 
web-ergonomie.html 



visuellement de l'une a l'autre pour vous concentrer successivement sur 
la zone a survoler et sur la zone d'affichage de l'information detaillee. 
Dans l'ideal, cette derniere devrait done apparaitre aussi pres que 
possible de la source. 

Ces remarques soulignent un point : vouloir eviter le trop-plein d'infor- 
mations ne doit pas vous conduire a utiliser des moyens de contourne- 
ment qui compliquent la vie de vos internautes. Sachez done faire la 
balance entre la quantite d'informations que vous souhaitez presenter, le 
format de votre page et sa facilite d'utilisation. 

La question de la publicite 

II se trouve que, lorsqu'on essaie de supprimer les informations inutiles 
dans un site, on s'apercoit que Ton se passerait bien des espaces 
publicitaires : ils libereraient immediatement de la place a l'ecran et dans 
la tete des internautes. 

Or il est souvent impossible de supprimer la publicite, puisque ce serait 
ignorer le modele economique du Web et les necessites liees a ce support 
en tant qu'espace de visibilite pour les marques. Tout ce que vous pouvez 
faire consiste a limiter les degats du point de vue utilisateur. 

Pour limiter la charge informationnelle de la publicite, vous pouvez la 
cantonner au pourtour de votre site, dans des zones reservees (on dit par 
anglicisme qu'on la clusterise). Autrement dit, elle ne doit pas se melanger 
a votre contenu : les internautes pourront ainsi plus facilement l'ignorer 
et le trop-plein d'informations sera moins genant pour eux (figure 5-23 
ci-contre). 



Recommandation 
Utilisez le blanc 



Meme si I'espace ecran est un espace cher que 
Ton veut pouvoir exploiter au maximum, vous 
devez accepter de laisser certains espaces vierges : 
ils serviront a separer les differentes zones et a 
donner une impression de clarte aux internautes 
qui decouvrent votre page. 



Optimiser l'organisation et la hierarchic visuelle 

Une fois que vous avez selectionne l'ensemble des elements a presenter 
sur votre page, vous devez les organiser de maniere optimale a l'ecran. 
Pour y parvenir, rappelez-vous des lois de la Gestalt que nous evoquions 
au chapitre 3. 

Utilisez les principes de proximite et de similarite pour agencer votre 
page de maniere a degager des blocs d'informations, des zones differen- 
ciees. Objectif a atteindre : votre page doit avoir l'air bien rangee. Cette 
recommandation est valable aussi bien au niveau de la perception gene- 
rale d'une page que pour le detail de chacune des zones. 

Au niveau de l'organisation generale de votre page, distinguez les 
espaces de navigation, les differents blocs de contenu, les informations 
complementaires, les elements d'interaction (boutons d'action, formu- 
laires), etc. En arrivant sur une page, un internaute doit distinguer tres 
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Figure 5-23 

La publicite est moins genante lorsqu'elle 
est placee sur la droite, a cote du site. 
A I'inverse, la publicite est plus difficile 
a ignorer lorsqu'elle est placee 
en plein milieu du contenu. 
Sources : www.marmiton.org 
/ www.lemonde.fr 



rapidement les differents espaces qui la composent et le rapport que les 
elements entretiennent entre eux. Attention, ce n'est pas en sur-decou- 
pant votre contenu que vous obtiendrez la meilleure composition pos- 
sible. Essayez d'emboiter les zones les unes dans les autres plutot que de 
concevoir votre page comme une somme d'elements de meme niveau. 

Vous pouvez aussi optimiser l'organisation visuelle a l'interieur de cha- 
cune des zones de votre page. Par exemple, on peut alleger la charge 
relative a un formulaire par une simple structuration visuelle, en creant 
des groupes de champs et en les separant a l'aide d'un titre et/ou d'un 
separateur graphique (voir figure 5-24). 
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Figure 5-24 

Le formulaire de creation de compte sur le site de Yahoo! 

est decoupe en plusieurs parties, definies par un titre 

et separees par un filet. Ce principe permet de simplifier 

la prise en main de la page par I'internaute. 

Source : www.yahoo.fr 
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^organisation visuelle en differentes zones ne suffit pas toujours pour 
rendre votre page comprehensible d'emblee. Vous devez y aj outer tout ce 
qui releve de la hierarchie visuelle. Normalement, tous les elements pre- 
sents dans votre page ne se situent pas sur le meme plan : certains sont 
forcement plus importants que d'autres pour vos internautes. Vous devez 
traduire ces differents degres d'importance au niveau de l'interface. 

Ainsi, prevoyez differents niveaux de blocs, de titres et de textes pour 
dessiner une hierarchie dans votre page. Attention, n'en faites pas trop. 
On peut observer sur une page web deux defauts opposes : soit la page 
est trop heterogene et la complexite se situe au niveau de la selection 
mentale parmi de nombreux elements disparates ; soit elle est trop 
homogene, c'est-a-dire que tout est au meme niveau et qu'il est done 
difficile de distinguer des groupes d'informations. 



112 



Regie n° 3. Coherence : le site capitalise 
sur l'apprentissage interne 

Pour que vos internautes puissent se forger un modele mental solide de 
votre site, vous devez rester coherent dans tous vos choix. Cela les aidera 
a naviguer sur votre site de maniere efficiente. A l'inverse, si vous deviez 
d'un principe utilise sur une autre page, vous risquez de les perturber. En 
effet, lorsqu'un internaute utilise avec succes un element d'interface pour 
accomplir une action, il essaiera immanquablement d'appliquer la meme 
strategic dans des situations comparables. Un site Internet doit done 
etre coherent avec lui-meme, et ce a differents niveaux. 

Les localisations sont coherentes 

Tout d'abord, ne changez pas les choses d'endroit ! Cette recommanda- 
tion est critique pour les elements de navigation. En effet, une fois que 
l'internaute a navigue d'une certaine maniere, il cherchera a reiterer cette 
strategic a chaque fois qu'il voudra se deplacer dans le site. Soyez done 
coherent dans l'emplacement des barres de navigation. 

II ne faut pas non plus supprimer des elements de navigation, puisqu'ils 
servent de reperes aux internautes. Si vous decidez de fournir une fonc- 
tionnalite de navigation, elle doit etre presente dans l'ensemble du site si 
e'est pertinent. Par exemple, sur le site de Nestle, le chemin de naviga- 
tion disparait dans les pages finales, alors qu'il serait tees utile aux inter- 
nautes pour revenir aux niveaux superieurs. 



UN PEU DE PSYCHOLOGIE 

La coherence exploite 

les apprentissages inconscients 

Bien que le recours a une interface coherente soit 
base sur des processus lies a l'apprentissage, a la 
memoire et aux habitudes, il ne s'agit pas de 
demander aux gens de memoriser des choses. On 
cherche plutot a se servir de ce qu'ils ont engrange 
en memoire sans s'en rendre compte, puisque les 
internautes commencent a « apprendre » votre 
site des qu'ils arrivent sur la premiere page. 
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Figure 5-25 

Sur le site de Nestle, le chemin de navigation 
est present dans la page de liste Cereales, 
mais disparait dans les fiches produits. 
Source : www.nestle.fr 
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Autre exemple sur le site d'Acova, ou la navigation peut se faire via les 
quatre bulks situees dans le bandeau lorsqu'on est sur la page d'accueil 
(exemple : Radiateurs siche-serviettes), mais pas en page interieure. Les 
bulles sont toujours presentes mais ne sont plus cliquables : 
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Figure 5-26 Sur le site d'Acova, les categories de produits representees sous forme de bulles sont cliquables 
en page d'accueil, mais pas en page interieure, alors qu'elles restent presentes. Source : www.acova.fr 

Vous devez aussi veiller a la coherence des items a l'interieur du menu. 
Ainsi, nous vous deconseillons de modifier l'ordre des elements en fonc- 
tion de la rubrique choisie par l'internaute. Ce type de precede com- 
plique la consultation de l'ensemble des rubriques et empeche 
l'installation d'un modele mental efficace. 

Par exemple, dans la rubrique DVD du site de Cdiscount, les entrees chan- 
gent de place dans le menu en fonction de la page consultee par l'internaute. 
Ce dernier peut done difficilement les lire toutes en utilisant leur ordre (avec 
une strategic de type : « j'ai vu la 1, la 2, la 3, etc. »). Le menu nest jamais 
fixe et on oblige l'internaute a se souvenir des rubriques qu'il a visitees. 



Figure 5-27 

Sur le site de Cdiscount, la localisation des entrees 

du menu secondaire est modifiee en fonction 

de la rubrique consultee. II est done difficile de consulter 

plusieurs rubriques de maniere sequentielle. 

Source : www.cdiscount.com 
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Les appellations sont coherentes 

Le second type de coherence concerne le vocabulaire utilise. Vous devez 
toujours faire appel au meme mot pour designer un element. Cette regie 
est valable pour les mots eux-memes, mais aussi pour leurs declinaisons. 

Par exemple, sur le catalogue virtuel du site de Monoprix, un produit peut 
etre Ajout[e] au panier. Pourtant, pour le retrouver, l'internaute doit aller 
dans la Liste d'articles, qui devient Liste d'achats lorsqu'on en consulte le 
detail. De quoi y perdre son latin ! 



MONOPRIX 



On fair quoi pour vous aujourd'l 



'MN NUT IE HESTER! 






Confiture 

''Mirnuprin Guunurl" 

fntt *{ fnaijt d« ton «* minib*ll* 

Le pot de 375 jr. 

(Hit I k E : 6,121] 





ASAVOIR 
Le vocabulaire, ca se travaille ! 

Le manque de coherence en termes de vocabulaire 
est un defaut recurrent sur le Web. II est tres facile 
de tomber dans ce type de travers lorsqu'il n'existe 
pas de referent explicite pour nommer les choses. 
Les concepteurs ou les developpeurs les choisis- 
sent alors un peu au hasard, au moment oil ils doi- 
vent les faire figurer dans I'interface, sans reflechir 
plus loin. 

Sachez qu'il existe des methodes, des metiers et 
des livrables pour travailler de maniere tres rigou- 
reuse sur le vocable : vocabulaires controles, the- 
saurus, taxonomies, etc. 
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Figure 5-28 

Sur le site de Monoprix, trois termes differents 
(Panier, Liste d'articles, Liste d'achats) 
sont utilises pour referer au meme objet. 
Source : www.monoprix.fr 
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Methodologie 
Charte ergonomique 



La coherence des localisations, des appellations, 
des formats de presentation et des interactions 
peut etre soutenue par I'utilisation d'une charte 
ergonomique. Ce type d'outil permet a quiconque 
travaillant sur le projet d'avoir line reference assu- 
rant la coherence du site dans sa globalite. Ainsi, 
elle permet d'ameliorer I'experience de I'inter- 
naute sur un site ou un ensemble de sites grace a 
la mise en place d'un univers homogene. 



Les formats de presentation sont coherents 

Vous devez aussi rester coherent dans les formats de presentation 
affectes aux elements presents dans votre site. II est utile de distinguer 
les elements d'interface par leur format afin que l'internaute puisse se 
construire mentalement des groupes d'objets. Cela lui permet d'inferer 
la fonction d'un objet a partir de son apparence. 

Fakes attention : cet objectif de coherence necessite aussi de l'heteroge- 
neite. En effet, si les elements comparables doivent se ressembler, des 
elements differents doivent etre presentes dans des formats distincts. 
Recherchez done la coherence a l'interieur des classes d'objets et l'hete- 
rogeneite entre ces memes classes. Vous eviterez ainsi que vos inter- 
nautes confondent les types d'objets et pensent, par exemple, qu'un texte 
non cliquable est un lien (ou inversement). 

Appliquez cette regie aux formats de presentation des textes et des liens, 
mais aussi des images, des menus de navigation, des mises en avant 
(ainsi l'auto-promotion ne doit pas ressembler a de la publicite), etc. 

Les interactions sont coherentes 

La derniere dimension relative a la coherence dans un site concerne les 
modes d'interaction proposes aux internautes. Votre site doit toujours se 
comporter de la meme maniere afin que vos visiteurs ne soient pas sur- 
pris de son fonctionnement et puissent lui faire confiance. 

Si, par exemple, a un endroit de votre site, un menu deroulant est associe 
a un bouton devant etre explicitement active par un clic, vous devez vous 
en tenir a ce comportement. Evitez done d'utiliser un menu deroulant 
dans lequel la seule selection d'un item declenche la navigation, ou votre 
internaute sera perdu. 

Maintenant que vous savez comment assurer la coherence interne de votre 
propre site, nous allons apprendre a etre coherent avec les autres sites web. 



Regie n° 4. Conventions : le site capitalise 
sur I'apprentissage externe 

Pour que vos internautes s'approprient rapidement votre site web, vous 
devez capitaliser sur ce que Ton appelle Y apprentissage externe. Lorsqu'un 
internaute arrive sur votre site, il n'est pas vierge de toute experience. II a 
deja visite d'autres sites et en a tire des connaissances sur le fonctionne- 
ment d'un site Internet. II va essayer, meme s'il n'en a pas conscience, 
d'appliquer ces connaissances a vos pages. 
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Votre site Internet doit done etre coherent avec les autres sites arm de 
beneficier de ces connaissances anterieures des utilisateurs. Tenir compte 
des conventions web vous garantira un niveau d'expertise minimal des 
internautes sur votre site. Si vous respectez les basiques, votre site sem- 
blera simple et intuitif parce qu'il colle aux habitudes des utilisateurs. Si 
ce n'est pas le cas, votre internaute risque d'etre decontenance, voire de 
penser que le site ne fonctionne pas. 

Respecter les conventions, e'est aussi accepter qu'une solution ergono- 
mique ne soit pas une solution ergonomique dans l'absolu mais une 
solution adaptee a l'internaute. II arrive done de faire des choix qui con- 
tredisent certains principes d'ergonomie, mais prennent en compte les 
habitudes des internautes. Si, par exemple, vous etes certain que vos 
internautes connaissent un terme, une icone, un principe d'interaction, 
e'est probablement celui que vous devez choisir, meme s'il ne vous appa- 
rait pas idealement comme le plus comprehensible. 

Pour les internautes, l'lnternet est un concept general. Les moins experi- 
mentes en particulier ont du mal a faire la distinction entre les sites. De 
leur point de vue, ils vont sur l'lnternet, point. lis s'attendent done logi- 
quement a ce que tous les sites fonctionnent de la meme maniere. 
Lorsque leur experience differe de leurs connaissances anterieures, leur 
conclusion est rapide : e'est forcement que le site ne marche pas. 

Les recherches dans ce domaine attestent d'ailleurs que les utilisateurs 
preferent les sites conventionnels, ou ils peuvent appliquer le fruit de 
leurs experiences passees. Vous devez done a la fois comprendre le 
capital accumule par vos internautes et vous y adapter. 

Qu'est-ce qu'une convention ? 

Le plus difficile pour respecter cette regie est de determiner ce qui releve 
de la convention de ce qui n'en releve pas. Jakob Nielsen differencie plu- 
sieurs niveaux de standardisation selon le pourcentage de sites appli- 
quant un principe : 

• Vous avez affaire a un standard lorsque plus de 80 % des sites utili- 
sent le meme principe. 

• Vous avez affaire a une convention lorsque 50 a 79 % des sites utili- 
sent le meme principe. 

Autrement dit, on peut dire que, lorsque les internautes voient quelque 
chose sur plus de la moitie des sites web, ils s'attendent a retrouver le 
meme modele sur d'autres sites. Lorsque vous etudiez les conventions 
qui concernent votre site web, veillez a prendre en compte les sites que 
visitent vos internautes plutot que l'ensemble des sites web de maniere 
indifferenciee. Ainsi, si un site est consulte tres frequemment par votre 



Anecdote 
Qui a drogue l'lnternet ? 



En 2004, Jakob Nielsen evoquait le manque de res- 
pect des conventions, comparant le Web a une 
fourmiliere batie par des insectes sous LSD. En 
effet, a part un concepteur drogue, personne n'a 
interet a s'affranchir volontairement des conven- 
tions puisque cela trouble les internautes. 
Or les sites qui ne prennent pas en compte les 
normes de presentation et d'interaction sont 
encore trap nombreux aujourd'hui et restent plus 
difficiles a utiliser que les autres. 



Aller plus loin 
Je prefere ce que je connais 

Pour appronfondir la thematique des habitudes et 
de leur influence sur les preferences des inter- 
nautes ou sur leur fidelite envers les sites Internet, 
vous pouvez lire les travaux de Kyle B. Murray et 
Gerald Haubl. 



VOCABULAIRE 
Conventions 



Dans cet ouvrage, nous employons le terme de 
convention pour designer aussi bien ce que Jakob 
Nielsen appelle des standards que ce qu'il appelle 
des conventions. 
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Idee recue 
Faire different pour se demarquer 

« Notre site doit etre original, nous ne voulons pas 
qu'il ressemble aux autres ». Ce n'est pas par I'ergo- 
nomie de votre site que vous devez vous 
demarquer ! Faites la difference par tout ce que vous 
voulez, sauf I'ergonomie. En tout cas, vous devez 
respecter les principes de base de I'ergonomie. 
Ce qui distingue un site c'est son contenu, les ser- 
vices qu'il propose, ses prix bas, son design gra- 
phique tres recherche, etc. Mais surtout pas 
I'ergonomie. Cette derniere doit etre transparente, 
afin que vos internautes puissent se concentrer sur 
I'essentiel, c'est-a-dire sur le contenu que vous 
leur offrez. Cela n'est possible que si vous adoptez 
les memes regies que tout le monde et proposez 
une interface qui paraisse logique. 
A part si la vocation de votre site est de troubler 
votre visiteur, ce qui ne represente qu'un infime 
pourcentage de sites, vous devez connaftre et res- 
pecter les conventions de base de I'ergonomie web. 



ANECDOTE Bleu ergonomique et autres conditionnements par I'habitude 

Connaissez-vous la petite histoire du lien bleu souligne ? 
Aux debuts de I'lnternet, chaque lien hypertexte etait presente dans un 
bleu tres particulier, le #0000FF. Pendant longtemps, de nombreux 
experts en ergonomie, dont le celebre Jakob Nielsen, ont defendu cette 
couleur comme la plus indiquee pour presenter des liens cliquables. Or, 
si on I'analyse, au vu des capacites perceptives de I'etre humain, cette 
couleur tres saturee n'est pas la meilleure pour I'oeil. Elle « vibre » tres 
rapidement ; elle est done peu indiquee pour la lecture. Ajoutez a cela 
que nombre de seniors ont des difficultes a la percevoir et vous pensez 
avoir assez de raisons pour decider de presenter vos liens dans une autre 
couleur, plus adaptee a I'oeil. 

Or c'est une erreur et Jakob Nielsen avait raison. Le fait que les inter- 
nautes associent les liens de ce type a des elements cliquables prime sur 
toute autre consideration. Comme nous I'avons vu dans la seconde partie 
de cet ouvrage, I'ergonomie doit s'adapter a son utilisateur dans ce qui 
fait sa specificite, au-dela de sa nature d'etre humain. Vous devez done 
prendre en compte les connaissances anterieures de vos internautes. 
Attention : aujourd'hui, les connaissances et attentes des internautes 
sont tout autres. Petit a petit, les formats de presentation des liens ont 
glisse vers d'autres couleurs et d'autres styles. A I'heure actuelle, c'est 
davantage la difference de format entre les liens et le reste du texte qui 
permet de les indicer en tant que tels (autrement dit, on repere un lien 
parce qu'il est different du reste du texte). 

Note : si le sujet vous interesse particulierement, c'est exactement la 
meme logique qui a conduit a conserver les claviers de type Qwerty ou 
Azerty (concus au depart pour eviter une saisie trop rapide sur les 
machines a ecrire, a cause de limitations techniques) alors que Ton dis- 
posal d'un clavier plus efficace et moins fatigant dans I'absolu (le 
Dvorak, propose en 1936 par Dvorak & Dealey). 



persona, vous lui accorderez plus de poids qua un site web au hasard. 
Ceci explique aussi pourquoi il est important de prendre en compte dans 
votre analyse les sites les plus visites en general : il est probable que votre 
internaute les connaisse. 

Respecter les conventions de localisation 

Les emplacements des elements sur une page web sont une des princi- 
pales dimensions des conventions web. Si vous observez un panel de 
sites, vous verrez qu'ils tendent a placer les elements d'interaction pri- 
mordiaux aux memes endroits. Ces conventions s'appliquent a des ele- 
ments tels que le logo (que Ton retrouve presque exclusivement en haut 
de l'ecran et extremement souvent sur la gauche), le moteur de recherche 
(en haut du site), Faeces au panier (en haut a droite de l'ecran), les barres 
de navigation (en haut pour les formats horizontaux et principalement 
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pour les rubriques de premier niveau ; sur la gauche pour les formats ver- 
ticaux et principalement pour les rubriques de second niveau ; parfois en 
format vertical sur la droite pour les navigations complementaires ou 
transversales, etc.), l'acces aux mentions legales (dans le pied de page), 
etc. 

Vouloir se differencier de ces conventions vous expose a reduire l'utilisa- 
bilite de votre site. Prenons un exemple sur le site de Rowenta, ou la 
localisation originale du chemin de navigation (associee a un format 
faible visuellement) fait qu'il n'est pas vu par les internautes. Tout le 
benefice qui lui est associe est ici perdu, en partie parce que Ton n'a pas 
respecte les conventions de localisation. 
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Recommandation 
Un format visuel fort peut compenser 
une localisation peu conventionnelle 

Dans nos deux premiers exemples, vous voyez que 
le non-respect de plusieurs regies d'ergonomie 
concourt a creer une interface peu utilisable. Les 
localisations non conventionnelles du chemin de 
navigation du site Rowenta ou du moteur de 
recherche du site Vichy sont couplees a des for- 
mats faibles visuellement (taille reduite, couleurs 
qui ne ressortent pas). 

Pensez done que dans certains cas, un format 
visuel tres appuye peut compenser un emplace- 
ment peu conventionnel. 



i 

IT) 



';*riRAr ;'>l! 



Figure 5-29 

Sur le site de Rowenta, la localisation 
non conventionnelle du chemin de 
navigation en bas de page reduit 
sa visibility et sa frequence d'utilisation. 
Source : www.rowenta.fr 



De meme sur le site de Vichy (figure 5-30), l'emplacement du moteur 
de recherche dans le coin inferieur gauche (associe a un format faible 
visuellement) le rend difficilement localisable par les internautes. 

Dernier exemple sur le site d'Habitat (figure 5-31), ou l'emplacement 
du moteur de recherche, combine a une faible affordance a l'interacti- 
vite, le rend peu visible. 

Cette regie est plus ou moins importante en fonction de votre type de 
site et de la charge informationnelle a l'ecran. Ainsi, sur le site de 
l'album 5:55 de Charlotte Gainsbourg (figure 5-32), il y a peu de 
chances que les internautes ratent la barre de navigation, alors quelle est 
placee de maniere tres peu conventionnelle en bas de l'ecran. 

Ceci s'explique essentiellement par l'extreme depouillement de la page, 
mais aussi par le fait que les internautes s'attendent a avoir un menu de 
navigation pour acceder aux contenus du site : de fait, e'est a peu pres le 
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Figure 5-30 

Sur le site de Vichy, la localisation non 

conventionnelle du moteur de recherche 

en bas de page reduit sa visibilite 

et sa frequence d'utilisation. 

Source : www.vichy.fr 




Figure 5-31 Sur le site d'Habitat, 

la localisation non conventionnelle 

du moteur de recherche reduit sa visibilite 

et sa frequence d'utilisation. 

Source : www.habitat.fr 
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Figure 5-32 

Sur le site de I'album 5:55 de Charlotte 
Gainsbourg, la localisation non 
conventionnelle de la barre de navigation 
en bas de page ne met pas en peril 
son utilisation, du fait de sa force visuelle 
au regard du reste de I'ecran. 
Source : www.charlottegainsbourg.fr 



seul endroit oil ils peuvent penser trouver un tel menu. Vous pouvez done 
vous affranchir des conventions de localisation si le reste de vos choix jus- 
tine cet ecart et ne met pas en peril une des fonctions fondamentales d'un 
site web : que les internautes trouvent les elements d'interaction qui vont 
leur permettre de parcourir le site et d'agir sur lui. 



Respecter les conventions de vocabulaire 

Nous verrons, a la regie n° 6, a quel point il est important d'employer sur 
votre site des mots faciles a comprendre par vos internautes. Or, encore 
une fois, la comprehension n'est pas une affaire de comprehension dans 
Vabsolu. II est primordial de prendre en compte ce qui se fait sur le Web 
afin que vos internautes comprennent ce que vous voulez leur dire. 

Ainsi, la page d'accueil s'appelle Accueil, le panier s'appelle Panier, le 
plan du site Plan du site, la page de contact Contact, etc. N'essayez pas 
de deroger aux conventions de vocabulaire en ce qui concerne les princi- 
paux elements du site. Vous pouvez vous permettre des ajustements, 
mais pas d'introduire un mot totalement nouveau pour vos internautes. 
Ainsi, Accueil est aussi comprehensible sous cette forme qu'avec l'intitule 



Dans ce livre 

L'analyse concurrentielle 

pour mettre a jour les conventions 

La demarche de l'analyse concurrentielle est la 
pour vous aider a reperer les conventions en 
observant les pratiques d'un panel de sites bien 
defini. A voir au chapitre 7 ! 
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Figure 5-33 

Sur le site d'lsabel Marant, le terme 

Prochaine page, moins conventionnel que 

I'habituel Page suivante, dessert la visibility 

et I'utilisation de la fonctionnalite. 

Source : www.isabelmarant.tm.fr 



Page d'accueil ou Accueil [nomdusite]. Idem pour Panier, Votre panier, 
Mon panier, Panier d'achats, etc. 

Sur la page Contact du site d'lsabel Marant, I'utilisation du mot Pro- 
chaine page (au lieu de Page suivante) oblige l'internaute a reflechir plus 
qua l'accoutumee. Meme si cet effort de reflexion n'est pas conscient, si 
vous additionnez plusieurs contraintes de ce type dans votre site, ce der- 
nier paraitra lourd a utiliser 

Dans un autre registre, sur le site de vente en ligne de Colette, le panier 
est appele Sac. Notez que ce choix est moins genant lorsqu'il est associe 
au terme Ajouter au, car ce dernier incite les internautes a comprendre 
de quoi il s'agit. Cependant, lorsqu'ils cherchent le mot Panier pour 
retrouver leurs achats, l'adoption d'un autre terme par souci d'originalite 
peut se reveler plus problematique. 



Figure 5-34 Sur le site de Colette, 

le terme Sac, moins conventionnel 

que I'habituel Panier, dessert 

la visibility de I'acces a cette page. 

Source : www.colette.fr 
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Pensez aussi a vous renseigner sur les conventions du domaine si vous 
travaillez sur un site tres specifique, qui necessite d'utiliser un vocabu- 
laire familier aux specialistes. Mieux vaut eviter de recommander le rem- 
placement d'un mot obscur par un mot plus adequat dans l'absolu, alors 
que le mot incrimine est tout a fait commun dans le secteur... 

Enfin, tenir compte des conventions vous oblige aussi a ne pas utiliser de 
maniere detournee un mot deja pris pour representer un objet ou un 
concept donne. Par exemple, sur le site de la mairie de Paris, on propose 
aux internautes d'ajouter les articles dans un panier, alors qu'il s'agit de 
les inserer dans une selection qu'ils peuvent s'envoyer par e-mail. Rien a 
voir, done, avec une quelconque fonctionnalite d'e-commerce. 
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Respecter les conventions (('interaction 
et de presentation 

La demiere dimension des conventions web touche aux modes d'interac- 
tion. D'apres leur experience sur d'autres sites, vos internautes s'attendent a 
ce que le votre se comporte d'une certaine maniere. Veillez done a rester 
conventionnel dans les modes d'interaction tres repandus sur le Web (ascen- 
seurs, formulaires, alertes, declenchement d'actions, etapes classiques d'un 
process de commande, etc.), ainsi que dans leurs formats de presentation. 

Par exemple, les internautes ont appris qu'une liste d'objets defilant de 
maniere animee est souvent un menu dont chacun des items est cli- 
quable. Vous devez done utiliser ce type d'interface a bon escient et pas 
seulement dans un esprit ludique. C'est notamment le cas sur le site de 
Carambar, ou les bonbons qui dement en bas de l'ecran donnent 
l'impression d'etre interactifs et de pouvoir nous emmener quelque part. 
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Figure 5-35 

Sur le site Paris.fr, le fait de nommer un objet 
Pan/enmplique que les internautes s'atten- 
dent a une fonctionnalite d'achat en ligne. 
Source : www.paris.fr 
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Figure 5-36 

Sur le site de Carambar, la ribambelle de bonbons 
defilants a des airs de menu de navigation, alors 
qu'elle n'a qu'un role de decoration. 
Source : www.carambar.fr 
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Sur le site d'Acova (dont nous avons deja observe le manque de coherence 
en termes de navigation), on remarque egalement un defaut d'application 
des conventions, susceptible de degrader le taux d'acces aux produits. En 
effet, comme nous l'avons vu, ce site presente ses quatre gammes de pro- 
duits sous forme de « bulks » dans un bandeau graphique (figure 5-37). 
Or c'est le seul moyen, a partir de la page d'accueil, d'acceder aux produits. 
Du fait de cette presentation peu conventionnelle, une partie des inter- 
nautes risque d'eprouver des difficultes a reperer la navigation : 



Figure 5-37 Sur le site d'Acova, la navigation 

permettant d'acceder aux produits ne ressem- 

ble pas a ce que les intemautes connaissent 

d'un menu de navigation. 

Source : www.acova.fr 
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Prenons un autre exemple concernant les menus de navigation. Sur le site 
de Canon, l'utilisateur qui survole un des items de navigation principale voit 
s'afficher ce qui semble etre les sous-mbriques correspondantes (figure 5-38). 
Or, s'il essaie de cliquer sur l'une d'entre elles, il ne va pas y parvenir, car 
l'affichage des sous-rubriques disparait. Apres plusieurs essais, soit il quitte 
le site en pensant que la navigation ne fonctionne pas, soit il persevere et 
tente de cliquer uniquement sur la rubrique de premier niveau (par exemple, 
Support), ce qui pourra effectivement le mener aux contenus attendus. 



Figure 5-38 Sur le site de Canon, 

les exemples de contenus qui s'affichent 

au survol d'un item de navigation 

principale semblent cliquables, 

car ils ressemblent a un menu 

de navigation. 

Source : www.canon.fr 
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En fait, ce qui s'affiche sous la barre de navigation n'est en aucun cas des 
elements cliquables, mais uniquement des informations sur le type de 
contenu que Ton pourra trouver dans la rubrique. Or, les formats de pre- 
sentation et d'interaction adoptes induisent l'internaute en erreur. En 
effet, ils ressemblent etrangement a ce que bon nombre d'autres sites pro- 
pose comme acces direct aux sous-rubriques. 

Prenez garde aussi a ne pas effrayer vos internautes en presentant des 
informations peu importantes sous forme d'alerte Javascript, avec une 
icone Danger. En effet, ils ont l'habitude de voir ce genre d'alerte en cas 
d' erreur. Lorsqu'ils sont confrontes a ce type de message, les internautes 
s'imaginent done avoir fait une betise et sont obliges d'en lire le texte plus 
attentivement (pour, finalement, se rendre compte qu'il ne s'agit pas d'un 
message d'erreur mais d'une simple information). Autrement dit, n'utilisez 
pas une convention d'interaction telle que l'alerte Javascript (principale- 
ment destinee a attirer l'attention sur une erreur) pour presenter une infor- 
mation non critique a vos internautes. Regardez a cet egard comme les 
exemples suivants semblent indiquer a l'utilisateur qu'il s'est trompe : 

Sur le site de SFR Music, lorsque l'internaute vient de renseigner son 
type de telephone portable, on lui indique la marche a suivre via ce type 
de fenetre : 



E 



Recommandation 

Utiliser la convention d'interaction 

la plus appropriee 

Un internaute comprend un site en fonction de ce 
qu'il a deja vu sur Internet. Utilisez done les conven- 
tions d'interaction a bon escient, et non de maniere 
detournee. Vous risquez sinon que votre internaute 
comprenne mal ce que vous voulez lui dire. 
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Figure 5-39 

Sur le site de SFR Music, la presentation 
d'une simple information sous forme de fenetre 
Javascript semble indiquer une erreur. 
Cela risque done d'effrayer les internautes 
inutilement. 
Source : www.sfr.fr 



De meme sur l'ancien site de Promod, suite a l'ajout d'un article au panier, 
on affichait une fenetre de ce type comportant le message suivant : 



.a page sur http://www.promod.fr dit : 

fi\ Le produit a ete ajoute a votre panier. 

Pour valider votre commande ou voir votre panier, 
cliques sur le lien "Mon panier" en haut a droite de I'ecran. 




Figure 5-40 

Sur l'ancien site de Promod, la presentation 
d'une simple information sous forme de fenetre 
JavaScript semblait indiquer une erreur, 
au risque d'effrayer les internautes inutilement. 
Source : ancien site www.promod.fr 



C'est d'autant plus dommage que ce message ne donne qu'une indication 
d'interaction (l'internaute qui veut poursuivre sa commande doit ensuite 
valider le message puis chercher le lien Mon panier a l'endroit indique). 
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En utilisant une mauvaise convention d'interaction, on se prive done de la 
possibility de presenter des messages « interactifs », permettant a l'inter- 
naute de naviguer directement vers ce qui l'interesse. C'est en revanche ce 
qui se passe sur le site de Castorama, suite a l'ajout d'un article au panier : 



Figure 5-41 

Sur le site de Castorama, la presentation de la 

confirmation d'ajout au panier sous forme de 

fenetre flottante permet de proposer plusieurs 

choix de navigation a I'internaute. 

Source : www.castorama.fr 
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COMTINUER MES ACHATS 



La nouvelle version du site de Promod a elle aussi resolu le precedent 
defaut en adoptant un message du meme type : 



Figure 5-42 Sur le nouveau site de 
Promod, la presentation de la confir- 
mation d'ajout au panier sous forme 
de fenetre flottante ressemble davan- 
tage a un message de confirmation, 
et permet en outre de proposer 
plusieurs choix de navigation a 
I'internaute. 
Source : www.promod.fr 
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Recommandation 

Le pointeur doit changer 

au survol d'un element cliquable 

Cette notion de pointeur est aussi tres importante en 
termes fonctionnels. Meme si vous ne prevoyez pas 
de format survole pour tous vos elements cliquables, 
veillez au moins a ce que leur survol provoque le 
changement de forme du pointeur de la souris (qui 
passe de la fleche a une petite main). Cette modifi- 
cation est essentielle pour que vos utilisateurs repe- 
rent ce qui est cliquable et ce qui ne Test pas. 



La plupart du temps, c'est plutot une mauvaise representation du mode 
d'interaction qui pose des problemes d'utilisabilite. 

Ainsi, sur une precedente version du site d'Isabel Marant (figure 5-43), 
la representation du parcours de la souris, bien qu'assez jolie et amusante, 
s'averait toutefois difficile a utiliser du fait de l'utilisation d'un pointeur 
d'apparence peu conventionnelle (illustration de gauche). Remarquez en 
revanche comment, sur la version actuelle du site (illustration de droite), il 
est possible de conserver une part de l'esthetique existante, tout en ajoutant 
un pointeur classique permettant a I'internaute de designer precisement 
ce sur quoi il veut cliquer. 



126 



CONTACT 






CONTACT 



LLICTlONfl 
?ll s I !.&< n'E I f 07 
AL I OUMl 1 hllVE t UJ/QB 



ip HfJtlTICIJ^S 









LLECTlOHS 
rusiikriXif (17 

al i t-K.^i' nivit u i 'u* 



Figure 5-43 

Sur le site d'lsabel Marant, 
I'ajout d'une forme de pointeur 
conventionnelle a permis de faciliter 
la selection d'une rubrique. 
Source : www.isabelmarant.tm.fr 
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Autre exemple sur le site de Surcouf : sur certains navigateurs, lorsque 
l'internaute clique dans le champ pour renseigner son nom, aucun cur- 
seur ne s'affiche. II est alors probable qu'il recliquera plusieurs fois 
dedans, pensant s'etre trompe. II finira par se risquer a saisir le debut de 
son nom sans savoir ou il va effectivement ecrire. Un detail de ce genre 
peut etre nuisible a l'utilisation de votre site. 
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Figure 5-44 

Dans cet exemple sur le site de Surcouf, nous 
sommes positionnes dans le champ Nom. Pourtant, 
aucun curseur ne s'affiche. II est done difficile de 
savoir si Ton est bien positionne au bon endroit. 
Source : www.surcouf.fr 



Dans la meme veine, observez cette page de connexion sur le site de 
Boursorama. 



^cces Client et Memhre 



Pour plus de securite, I'acces a vos comptes 
s'effectue desormais en deux etapes : 

Etape 1 : identifiezvous 

Etape 2 : saisissez votre mot de passe 



Identifiant: 


l i l 






Mot de passe: 


l I 







□ Memorisezcompte et mot de passe 



Figure 5-45 

Dans cet exemple sur le site de Boursorama, 
lorsque l'internaute clique dans un champ, le 
curseur s'affiche au milieu de ce champ, alors 
que conventionnellement il s'affiche a gauche. 
Ce comportement d'interface paratt etrange. 
Source : www.boursorama.fr 



Enfin, regardez sur le site du Credit Agricole la maniere dont la repre- 
sentation du code secret, dans ce qui ressemble a un champ de saisie, peut 
induire l'internaute en erreur (figure 5-46). On n'attend pas de lui qu'il 
saisisse son code secret au clavier, mais qu'il utilise le systeme de selection a 
la souris (qui permet d'optimiser le niveau de securite de la connexion 
d'un client a son compte bancaire en ligne). Or, le fait de fournir un champ 
de saisie peut inciter l'internaute a entrer son code au clavier, sans lire les 
instructions. La representation d'un autre mode d'interaction que celui 
attendu rend done l'interface moins intuitive quelle ne pourrait l'etre. 
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Figure 5-46 

Sur le site du Credit Agricole, la presence d'un 

champ de saisie incite a une interaction au 

clavier, et non a la souris. 

Source : www.paris-enligne.credit-agricole.fr 



2. Clquer mon code personnel 

smssm & 



==§ Cemander mon code personnel 
PF] Besoin d'akle? 



Les conventions d'interaction peuvent aussi etre propres a un type de 
sites en particulier. Les sites de commerce en ligne ont notamment 
interet a etre conventionnels et a adopter une trame commune de fonc- 
tionnement qui soit familiere aux internautes. 



RECOMMANDATION Le rapport entre conventions d'interaction et representation a I'ecran 



Vous voyez ainsi comme la presentation d'une inter- 
face sous une forme ressemblant a quelque chose de 
connu peut fausser toute la comprehension qu'ont les 
internautes de ce qui se passe. 

Dans ce cas, il faut choisir ! Soit vous presentez cette con- 
firmation d'ajout au panier de maniere plus classique, en 
faisant apparaitre cette etape comme un intermediaire 
entre une fiche produit et un panier, soit la confirmation 
d'ajout au panier consiste a amener vos internautes dans 
leur panier. Hors de ce choix, pas d'issue... 



Attention, respecter les conventions d'interaction ne 
fait pas tout. Vous devez aussi presenter les choses 
d'une maniere conventionnelle. Regardons ainsi com- 
ment, sur le site de la Redoute, la confirmation d'ajout 
au panier est conventionnelle en termes d'interaction, 
mais mal implementee en termes d'interface. 
Lorsque I'internaute ajoute un article a son panier, la 
confirmation consiste a I'envoyer sur une nouvelle page 
ou Ton atteste que I'article a bien ete ajoute. On lui pro- 
pose alors, soit de finaliser sa commande, soit de conti- 
nuer ses achats. Ce mode d'interaction en soi est parfait 
et renvoie a une pratique courante sur les 
sites de commerce en ligne. Or sa mise en 
place a I'ecran peut desorienter I'internaute. 
En effet, ce que Ton va appeler le « pre- 
panier » de la Redoute est presente de 
maniere strictement identique a un panier. 
Or, confirmer I'ajout en renvoyant les inter- 
nautes sur le panier est une autre des con- a """"""' c J .. a . .""*.""*. E ?.. ■.'." 
ventions d'interaction envisageables. On se 
retrouve done dans une situation croisee, ou 
I'internaute pense avoir affaire a son 
panier ; mais, en realite, ce n'est pas le cas et 
ce pre-panier ne comportera jamais plus 
d'une ligne, correspondant a I'article qui 
vient d'etre ajoute. 

Cette situation est particulierement dange- 
reuse dans le cas de commandes multipro- 
duits ou I'internaute a deja ajoute un article 
a son panier. Cette presentation est alors 
extremement derangeante et peu compre- 
hensible sans une analyse consciente et 
approfondie de I'interface (« Mais qu'est-ce 
que e'est que ca ? Je n'ai plus qu'un article ? 
Mais ou sont passes les autres ? »). 
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Figure 5-47 La confirmation d'ajout au panier sur le site de la Redoute semble 
renvoyer vers la page du panier. Source : www.laredoute.fr 
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Regie n° 5. Information : le site informe 
I'internaute et lui repond 

La cinquieme regie pour optimiser l'ergonomie de votre site web est 
assez simple dans l'idee : votre site doit etre poli et informer I'internaute 
de maniere complete et au moment opportun. Plusieurs recommanda- 
tions vous permettront d'atteindre cet objectif sans encombre. 



E 



L'ordinateur informe et previent I'internaute 



i 

IT) 



Ne soyez pas avare (('informations 

Tout d'abord, que ce soit au niveau general ou sur un detail d'interface, 
vous devez donner suffisamment d'informations a votre internaute pour 
qu'il vous comprenne. Dans l'ideal, il ne doit pas avoir besoin de cher- 
cher ou de reflechir, grace a 1 'information que vous lui fournissez. 

Donner de I'information generate 

Sur votre site, vous devez dire a votre internaute qui vous etes et ce que 
vous faites. Pour cela, vous devez travailler sur deux plans : les elements 
generiques de votre site et votre page d'accueil. 

Les elements qui se retrouvent en permanence sur votre site, quelle que 
soit la page consultee, sont un moyen de faire comprendre a l'utilisateur 
ce que vous pouvez lui apporter. Dans ce cadre, votre logo et la tagline 
associee vous seront d'une grande aide. En general, il n'est pas question 
de toucher a votre logo. Si le nom de votre site traduit un peu de son uti- 
lite, tant mieux, sinon tant pis. C'est done essentiellement votre tagline 
qui vous aidera a faire passer votre message. Elle sert a indiquer claire- 
ment a vos internautes a qui ils ont affaire. C'est certes important 
lorsqu'ils arrivent sur votre page d'accueil, mais cela devient primordial 
lorsqu'ils arrivent sur une page interieure (par exemple apres avoir clique 
sur un resultat dans un moteur de recherche) (figure 5-48, au verso). 

La tagline peut etre differente du slogan que vous utilisez pour votre 
image de marque offline. Si votre slogan ne transmet qu'un message publi- 
citaire, il est important de creer une tagline specifique pour votre site web. 
Font toutefois exception a cette regie les sites dont le nom est tees expli- 
cite, ceux qui sont deja connus des internautes parce qu'ils font partie des 
plus visites et ceux qui sont le relais web d'une marque deja connue offline. 

Les intitules de votre barre de navigation principale joueront aussi le role 
d'indices informationnels pour definir votre identite et votre activite. 



Recommandation 

Mais.. .vous m'avez dit 

tout a I'heure de diviser 

la quantite de mots par deux ! 

Ne pas etre avare, ce n'est pas parler a tort et a tra- 
vers, mais distiller la dose d'informations juste neces- 
saire a la comprehension. Dans la pratique, vous 
devez done faire la balance entre trap et pas assez 
d'informations, et c'est bien le plus complique ! 



VOCABULAIRE 
Definition et synonymes de tagline 

La tagline est autrement appelee baseline, 
endline, strapline (les deux derniers etant plutot 
utilises dans le milieu publicitaire) ou encore 
slogan. Dans le domaine du Web, tous ces mots 
referent au meme objet, a savoir la phrase qui 
accompagne votre logo, definissant ce que vous 
faites ou ce que vous apportez a l'utilisateur. 
La tagline doit done etre la traduction microscopique 
(puisqu'il est important qu'elle soit aussi courte que 
possible) de votre proposition de valeur. 



Dans ce livre 

Diff erencier la quantite 
et la qualite des informations 

Dans cette regie, nous abordons uniquement 
I'information sous Tangle quantitatif. L'aspect qua- 
litatif fera I'objet de la regie n° 6, e'est-a-dire la 
prochaine ! 
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Figure 5-48 

La tagline permet d'accompagner 

votre logo d'une phrase descriptive 

plus explicite que votre nom. 

Sources : www.cocooncenter.com / 

www.fluctuat.net / www.glowria.fr / 

www.ulteem.fr / www.speakeveryday.com / 

www.expectra.fr / www.marmiton.org 
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Figure 5-49 

En regardant le menu de navigation du site 

75.tv, je percois tres rapidement quels sont 

les realisateurs dont j'ai deja consulte la page 

et ceux qu'il me reste a voir. 

Source : www.75.tv 



Comme la repetition nest jamais inutile, nous vous recommandons 
done de concevoir ces intitules afin qu'ils soient les plus exacts possible. 

Donner de I'information ponctuelle 

Le point faible des sites web se situe souvent au niveau de I'information 
ponctuelle fournie aux internautes a l'interieur des pages. Notamment, 
vous devez toujours donner a votre internaute suffisamment d'informations 
relatives a la navigation : une barre de navigation principale visible en per- 
manence a l'ecran, une indication de l'endroit ou il se trouve dans le site, les 
differentes options qui s'offrent a lui et les pages qu'il a deja consultees. 
Cela lui permettra de se diriger plus efficacement au sein de votre site web. 

Lorsqu'on parle d'information, ce n'est pas toujours en termes de con- 
tenu, mais aussi en termes de formats de presentation. Grace a l'appa- 
rence visuelle d'un objet, vous pouvez transmettre de I'information. 
Regardez cet exemple sur le site de la societe de production Soixan7e 
Quin5e : le fait de barrer les realisateurs deja visites dans la liste permet a 
l'internaute d'identifier d'un seul coup d'oeil les pages deja visitees et 
celles qu'il lui reste encore a consulter. 

En outre, dans le cas d'interfaces transactionnelles, vous devez fournir 
suffisamment d'informations a votre internaute pour qu'il comprenne ce 
que vous attendez de lui. Ces informations peuvent etre globales (par 
exemple, vous donnez un titre a un formulaire de renseignement de don- 
nees) ou specifiques (par exemple, vous travaillez sur la pertinence du 
libelle d'un champ de formulaire). 
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Par exemple, sur le site de Quelle, lorsque l'internaute cree un compte 
client, on lui affecte automatiquement un code special tout en lui lais- 
sant la liberte de le modifier. Cette fonctionnalite est interessante 
puisqu'elle permet aux clients de choisir leur propre code special, en uti- 
lisant par exemple une suite de chiffres qu'ils memoriseront facilement 
parce que c'est leur date de naissance ou le code de leur interphone. Or, 
le libelle choisi pour decrire ce principe est tees obscur pour un inter- 
naute et sans doute encore plus pour les personas du site de Quelle, dans 
la mesure ou la seule explication fournie est la suivante : Si vous sou- 
haitez modifier votre code special, indiquez-le. 



VOTRE IDENTIFICATION 



Lea chjmpo suivia a"un * aont obl/gjtoirca. 




bn nous communiquant precisement votre adresse email, voub recevrez la confirmation de votre commaride 
et vous recevrez des informations et des offrea promotionnelles. 



Je souhaite recevoirpar email les ofrree commerciales de vos parcenaireG : O oui O Non 
n.-il h da* naissancs 



Gi vous souhaitez modifier votre code special, indiquez-le : "■::'■: 



E 



I 

IT) 




Figure 5-50 

Sur cette page de creation de compte du site 
de Quelle, il n'est pas evident de comprendre 
le fonctionnement du systeme de code special 
et ce que Ton attend de l'internaute. 
Source : www.quelle.fr 



Dans cet exemple, la quantite d'informations que vous fournissez a 
l'internaute n'est pas suffisante (en plus de leur manque de qualite). Pour 
eviter ce genre de probleme, pensez a toujours expliquer a l'internaute 
les raisons et consequences des actions que vous lui demandez de rea- 
liser. La longueur et la teneur de ces messages devront etre adaptees 
pour qu'il puisse comprendre ce que vous lui demandez et pourquoi vous 
le faites. 

Donner de l'information ponctuelle, c'est aussi augmenter votre inter- 
face de base de petites phrases qui vont, soit renseigner votre internaute 
sur ce que votre site peut lui apporter, soit le rassurer sur ce qui va suivre. 
Ainsi, sur le site de Reservoir Jeux, le bouton S'inscrire sur la page 
d'accueil est accompagne d'un texte qui decrit en quelques mots l'interet 
que l'internaute aurait a s'enregistrer sur le site (figure 5-51). 
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Figure 5-51 

Sur le site de Reservoir Jeux, on ajoute 

au bouton S'inscrire une description 

des avantages lies au compte utilisateur. 

Source : www.reservoir-jeux.com 



Inscrivez-vous gratuitement pour 
beneFicier des suggestions 
personnalisees et devenez client 
privilegie de Reservoir Jeux : 



Deja client ? 

* Mon Compte 

* Ma selection d'artides 

* Mes suggestions personnalisees 



Dans le meme ordre d'idees, lors de l'etape de paiement, Amazon rassure 
ses internautes : apres avoir clique sur le bouton Continuer, ils pourront 
toujours modifier leur commande. 



amazon.fr 



SICMVENUC ADRESSE ARTICLES EMBALLAGE LIVRAIS-ON PAIEMEN 
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term in ae, nous vous enverrons par e-mail le numero da telephone a appaler pour nous communiquer la numero complet da votre carta. Vous avaz aussi la possibilite da 
pnypr ]jhi t Iihcjiih Ijhik nirn ^ cImI.hi -.■-■ I vh ■-.'<■: -il niiij^ 'j. 
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Crypto gramme visuel 



De quoi s'aqit-il? 



Figure 5-52 Sur le site d'Amazon, on indique aux internautes que cette page de paiement n'est pas la derniere etape 
de la commande, grace a une legende adossee au bouton Continuer. Source : www.amazon.fr 



II est aussi primordial de donner toutes les informations necessaires a votre 
internaute pour qu'il comprenne bien l'interface. Par exemple, lorsque 
vous presentez une appreciation qualitative sous forme de note, donnez 
une echelle afin que l'internaute puisse comparer cette note a un minimum 
et a un maximum (sinon, cette derniere ne sert a rien). Regardez par 
exemple comment fait le site de VoD de Mk2 et comme il serait difficile 
de se faire une idee de l'appreciation du film sans cette echelle. 



Figure 5-53 

Sur le site de Mk2 VoD, afficher une etoile vide suite aux 4 remplies permet d'indiquer 

la note maximale qui peut etre attribute a un film, [.'illustration montre 

qu'en I'absence de cette etoile vide, I'indication de la note devient inutile. 

Source : www.mk2vod.com 
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Sur un site de vente en ligne, veillez a donner suffisamment d'informations a 
votre utilisateur sur le produit qu'il pourrait acheter. Le prix est evidemment 
une donnee cle a afficher. Voyez a cet egard comme, sur le site de Jour, on 
manque d'informations sur le tarif des ingredients. Jour propose de com- 
poser sa salade personnalisee en ligne, puis de se la faire livrer ou d'aller la 
chercher en magasin. La majeure partie de l'application consiste done a 
selectionner les ingredients que Ton souhaite ajouter a sa salade. Or, les tarifs 
de chacune des gammes d'ingredients sont bien caches, voire absents 
(figures 5-54 a 5-56). 
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Figure 5-54 Sur le site de Jour, 
il semble qu'on ne puisse pas voir 
le prix de chacun des toppings. 
Source : www.jour.fr 
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Figure 5-55 En fait, il faut survoler I'element situe a gauche de chaque ligne 

pour connaitre le prix des toppings de cette ligne. 

Source : www.jour.fr 

Le seul moyen, pour le client, de connaitre le tarif d'un extra consiste done a 
l'ajouter a son panier et a calculer la difference entre le montant initial de son 
panier et le montant apres ajout de l'extra. 
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Figure 5-56 Lors de 

la selection des extras, 

aucun moyen n'est donne a 

I'internaute pour connaitre 

le prix des produits. 

Source : www.jour.fr 
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Enfin, vous devez donner en permanence a vos internautes des infor- 
mations sur ce qui est en train de se passer (un processus de charge- 
ment ou d'enregistrement par exemple) grace a un feedback approprie. 
De cette maniere, il prendra conscience du processus et se preparera 
mentalement a l'attente. 

Si, par exemple, la consultation de votre site ou d'une video qui y appa- 
rait, necessite un temps de chargement important, dites-le a vos inter- 
nautes sous forme dun indicateur de progression. Celui-ci peut etre 
chiffre ou uniquement visuel, l'important etant qu'il y ait du mouvement 
a l'ecran. Ainsi, I'internaute dispose d'un indice pour comprendre que le 
site est en train de travailler et done qu'il doit patienter (voire figures 5-57 
et 5-58). 



RECOMMANDATION £a charge, d'accord, mais pour combien de temps encore ? 

II peut etre important de donner line valeur numerique a votre indicateur de progression 
lorsque le temps de chargement estime depasse une certaine duree. 
C'est encore plus important si I'etat de progression n'est pas affiche sous la forme d'un conte- 
nant virtuel que Ton remplit (barre verticale, cercle, recipient, etc.) qui permet a I'internaute 
d'evaluer subjectivement le temps qu'il lui faut encore patienter. 
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Figure 5-57 

Sur le site de Soixan7e Quin5e, I'indicateur 
chiffre permet de faire patienter I'internaute 
de maniere informee. 
Source : www.75.tv 
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ISABEL MARANT 



f7|^ 
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Figure 5-58 Sur le site d'lsabel Marant, le meme role est rempli par un simple indicateur visuel. Ce precede est tout a fait acceptable 

du fait de la rapidite de chargement du site. La perception d'un mouvement anime sous la forme d'une barre de progression suffit 

done a faire patienter I'internaute de maniere informee. Source : www.isabelmarant.tm.fr 

Informez, mais au bon moment 

Pensez aussi a dormer l'information suffisamment tot a vos internautes. 
II est notamment important de les prevenir s'ils s'appretent a effectuer 
une action qui sort de l'ordinaire. C'est le cas, par exemple, si le clic 
lance le telechargement d'un document ou bien ouvre une nouvelle 
fenetre. Dans les exemples suivants, on previent I'internaute assez tot 
pour qu'il puisse adapter son comportement en fonction de cette infor- 
mation. 



^ version pdf (307 Ko) 



Figure 5-59 

Sur le site d'Ergolab, indications qu'un document est a telecharger 

au format pdf, et qu'un lien ouvre une nouvelle fenetre. 

Source : www.ergolab.net 



The Most Hated Advertising Techniques, Alertbox Useit.com (2004). 
Pop-up Guidelines . IAB1 ^ dards and Guidelines (2004). 
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A l'inverse, sur le site du Tournaisis, un clic sur une rubrique du menu de 
navigation ouvre un nouveau site mais l'internaute n'en est informe que 
trop tard, lorsqu'il a deja clique. 



Bienvenue dans le Tournaisis 



I amipl ■ flfirjimfttitflttifi ■ ft-rarrl ■ raificarts ■ tens ■ plan du Sft) 




E 



Figure 5-60 

Sur le site du Tournaisis, on indique a l'inter- 
naute qu'un lien ouvre un site externe, mais 
uniquement lorsqu'il a deja clique sur ce lien. 
Source : www.tournaisis.be 
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Dans le mime ordre d'idees, ne decevez pas votre internaute en atten- 
dant qu'il soit sur une page produit pour lui indiquer que ce dernier n'est 
pas disponible. 




18S.00EUR 111.00EUR 
f 

fS 


IT1 Ce prodi.il r=i! rAs d&ponibta |t 


T2 - Ce ui-jd Ji n'esl ulua Jrstwriiblt: 
\'i Ub prDdJt nasi pUe HeponHJla 



Figure 5-61 

Sur le site des Petites, on ne decouvre que 
dans la fiche produit que ce dernier n'est 
disponible dans aucune taille. 
Source : www.lespetites.fr 



Donner de rinformation peut aussi etre un moyen de prevenir vos inter- 
nautes avant qu'ils n'effectuent des actions inutiles. Ainsi, sur le site d'Ame- 
rican Express (figure 5-62), on indique aux internautes qu'ils auront besoin 
de documents pour remplir le formulaire de demande de carte et ce, avant 
qu'ils ne commencent a le remplir. Sans cette information, ils risquent de se 
retrouver bloques apres avoir passe du temps a remplir les premiers champs. 

Enfin, vous devez informer le plus tot possible, mais sous reserve que 
cela ne charge pas la page inutilement. Par exemple, sur le site de la Sul- 
tane de Saba (figure 5-63), on indique au niveau des listes de produits 
les senteurs disponibles pour chacun d'eux. Cette indication est tres pre- 
cise et permet a l'internaute de changer de strategie en fonction du delai 
de disponibilite indique. En outre, cette information complementaire 
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est donnee sous la forme d'une liste deroulante, ce qui n'augmente que 
tres peu la charge informationnelle a l'ecran. 



Votre demande de souscription en moins de 5 minutes 

Pour fairs aboutir votre demande de carte, verifiezque vous repondez positivement aux 3 conditions de souscription 

ci- desscus : 

• Etre age(e} de 13 ans ou plus ; 

• Disposer aujourd hui dun compte bancaire en euro, domicilii en France ; 

• Avoir des revenus annuels reguliers superieurs a 20 000 EUR. 

Munissez-vous des pieces suivantes pour faciliter votre demande : 

• Un Releve d" Identite Bancaire ( RIB} ou un Releve d Identite Postal ( RIP} personnel, 

• Le n u mero de votre Ca rte America n Exp ress a ctuelle ( si vous en p o s sed ez u ne), 

• L" adresse complete de votre employeur. 



Figure 5-62 

Sur le site d'American Express, I'indication Munissez-vous 

des pieces suivantes pour faciliter votre demande 

permet d'eviter aux internautes de commencer 

leur saisie sans disposer des informations necessaires. 

Source : www.americanexpress.fr 



Une iriLies'Jon? 



| Selectionnez |~v|[ 



Comment souhaitez-vous voir I Prenom Norn |~v~|| 

apparaTtre votre nom sur votre 

Carte? * 

2'u 1 sarastires aL maKxnwi, espacea 




huile spray 100 ml 
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20 € 



Utilisation: Corps -Ch eve ux 

Grace aux precieuses essences narurelles , 
nos huiles parfument et nourissent aussi 
bien le corps que les chev . . . 
En savoir plus 

Choisissez votre senteur : 



BO IS DE SANTAL [sous 1 J) 

JASMIN (dispD) 

KARTe FLEUR D - RANGER (dispD) 

MUSC [dispD) 
. ROSE (dispD) 
IyLANGYLANG SPA(dispn) 



huile bouteille 250 ml 



Figure 5-63 

Sur le site de la Sultane de Saba, I'indication de la disponibilite 

des produits est cachee dans une liste deroulante, ce qui permet 

de fournir I'information sans surcharger I'interface de base. 

Source : www.lasultanedesaba.com 
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39 € 



Utilisation: Corps - Ch eve ux 

Grace aux precieuses essences narurelles , 
nos huiles parfument et nourissent aussi 
bien le corps que les chev . . . 
En savoir plus 



Choisissez votre senteur : 



AYURVEDIQUE SPA (dispo) 



J3 



On retrouve le meme type de fonctionnement sur le site d'Altitude, qui 
donne une information textuelle sur le nombre de couleurs disponibles 
pour un article des l'etape de liste (figure 5-64). Ici, cette donnee ne fait 
pas que simplifier le travail de l'internaute. Elle permet egalement de 
parer a toute reflexion de type : « Je ne vais pas cliquer sur ce produit car 
je n'aime pas le bleu ». 
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The North Face Vetements Femme 
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Figure 5-64 Sur le site d'Altitude, I'indication 
du nombre de couleurs disponibles pour un 
meme modele permet d'eviter que I'internaute 
ne consulte pas la fiche produit sous pretexte 
de ne pas apprecier la couleur choisie pour 
representer le modele dans la liste. 
Source : www.altitude-sports.com 
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On peut remarquer que Patagonia va encore plus loin, puisque les listes 
proposent des vignettes de l'ensemble des couleurs disponibles pour un 
modele. Un clic sur l'un des coloris permet d'ailleurs d'afficher le vetement 
dans cette couleur, des la page de liste. 
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Figure 5-65 

Sur le site de Pata- 
gonia, l'ensemble des 
coloris disponibles 
pour un produit 
est visualisable 
des la page de liste. 
Source : 
www.patagonia.com 
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Informez pour augmenter votre force persuasive 

Par ailleurs, l'lnformation donnee a l'internaute peut representer un bon 
moyen de persuasion. Tout le secret reside dans le fait de choisir la bonne 
information au bon moment. Sachez tabler sur vos points forts et les 
presenter de facon contextuelle a votre internaute, aux moments precis ou 
ils peuvent influencer son acte de decision. Nous allons passer en revue 
differentes manieres d'appliquer ce principe selon les points forts des sites. 

Pour commencer, prenons l'exemple de Saveur Biere et de Promod, qui 
indiquent dans la zone liee a l'achat le nombre de points de fidelite que 
peut apporter la commande de l'article consulte (figures 5-66 et 5-67). 



Figure 5-56 et Figure 5-67 

Sur les sites de Saveur Biere et de 

Promod, le nombre de points fidelite 

que l'internaute peut obtenir en 

achetant l'article est affiche juste en 

dessous du bouton d'ajout au panier. 

Sources : www.saveur-biere.com 

et www.promod.fr 
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On retrouve le meme principe lorsque Promod, dans la fenetre de con- 
firmation d'ajout au panier, calcule automatiquement le montant restant 
pour beneficier des frais de port gratuits (figure 5-68). Ce precede aug- 
mente le potentiel d'utilisation du bouton Continuer mes achats pour 
atteindre ce montant. 



\S Vous vcnoz tfajouter □ votrc f 




Gilet en tricot 2 boutons 



■ Taille. : 1 

■ 'Jolcri5 : tins bouris 



34,95 € 



Pkisuuti 5.ICHE (juui ut?i le riuiei d&b Ih/rabuii yiaLuHedea 60 cuius 

d'ochot* 



in sav:ir ::u; ■;,•'£ -■ ■5*: r - 



B 
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Figure 5-68 Dans le message de confir- 
mation d'ajout au panier de Promod, 
I'information sur le montant restant 
pour obtenir la gratuite de la livraison 
permet d'inciter I'internaute a atteindre 
ce montant en ajoutant un autre article 
a sa commande. 
Source : www.promod.fr 
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Diapers adopte le meme type de pratique en presentant a proximite 
directe du prix du produit le montant a atteindre pour se voir offrir la 
livraison. En outre, l'en-tete du site affiche de maniere permanente le 
montant restant pour atteindre ce seuil. 
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Figure 5-69 

La fiche produit du site 
de Diapers informe 
I'internaute sur le 
montant a atteindre 
pour beneficier des frais 
de livraison offerts ; 
l'en-tete, quand a lui, 
indique la sommequ'il 
reste a commander 
pour en beneficier. 
Source : 
www.diapers.com 
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Le site de Kiehl's, lui, joue sur le fait qu'il est possible d'ajouter gratuite- 
ment a chaque commande trois echantillons de produits au choix du client. 
Les concepteurs du site choisissent done d'afficher cette information 
directement dans les fiches produits (figure 5-70). 



Figure 5-70 La fiche produit du site 

de Kiehl's informe I'internaute 

qu'il pourra recevoir gratuitement 

trois echantillons de son choix 

s'il commande un produit. 

De maniere complementaire, 

pour les articles dont I'echantillon 

est disponible, la fiche produit 

permet d'ajouter directement 

I'echantillon de cet article au panier. 

Source : www.kiehls.com 
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Chez Philomene & Cie, qui livre les articles commandes dans de jokes 
valisettes ou coffrets, le fait de montrer cet emballage des la page produit 
joue un role incitatif non negligeable (figure 5-71). 

Enfin, TopShop pense a proposer aux visiteurs de son site l'acces a des 
informations cles dont ils ont tres souvent besoin (frais et delais de 
livraison, politique de retour...) directement dans la fiche produit, sous 
forme d'onglets (figures 5-72 et 5-73). Ainsi, I'internaute qui aurait un 
questionnement sur l'un de ces points ne quitte pas son contexte de 
depart, tout en obtenant une reponse rapide. 
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Accu ei I > Bebe > Caneton 



retour a la liste 



Caneton 





Chaussons revers cheville a cotes, 
finition pompon, bouton crochet 
main. 




Pur cachemire double fil 
Coloris : Beige siamois 



Lavage a la main 
Sechage a plat 



S-eleetionnez unetatiie 






disponible - Ih/raisan sous 4Sh 



^ AJOUTER A MON PANIER 



Livraison en valisette 



.V 
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Figure 5-71 La fiche produit du site 
de Philomene & Cie integre une photo 
de I'emballage dans lequel le destinataire 
recevra sa commande. 
Source : www.philomene-et-cie.com 
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I i- ADD TO BAG 
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Figure 5-72 La fiche produit nominale 
du site deTopShop presente classiquement 
un descriptif de I'article. 
Source : www.topshop.com 
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Figure 5-73 Un die sur I'onglet Delivery 

permet d'afficher, sans recharger I'ensemble 

de la page, toutes les informations sur la 

livraison dont I'utilisateur pourrait avoir 

besoin pour prendre sa decision d'achat. 

Source : www.topshop.com 
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Ce qui fait la difference sur ces derniers exemples, e'est bien l'emplace- 
ment de i'information. En effet, non seulement cette information existe, 
mais elle a un pouvoir suggestif d'autant plus fort quelle est affichee 
dans la fiche produit, a proximite directe des fonctions d'achat. L'inter- 
naute disposera ainsi de tous les elements dont il a besoin sans inter- 
rompre son processus d'achat. 



VOCABULAIRE 
Feedback, mais quel feedback ? 

La notion de feedback recoupe a la fois les proble- 
matiques d'information sur ce qui est en train de 
se passer et les reponses de I'ordinateur aux 
actions de I'utilisateur (on parle alors plutot de 
feedback instantane, ou immediat). 



L'ordinateur repond aux actions de I'internaute 

Nous venons de voir l'importance d'informer vos internautes arm qu'ils 
disposent de toutes les donnees necessaires pour comprendre le site et ce 
qui s'y passe. Ce type d'information est, la plupart du temps, unilateral : 
e'est le site qui envoie des messages vers I'internaute, sans vraiment tenir 
compte des actions de I'internaute sur le site. 

II est aussi primordial que votre site reponde a I'internaute lorsque ce der- 
nier effectue des actions. La encore, il s'agit de feedback. Pour grossir le 
trait, I'internaute pose une question et l'ordinateur lui repond. D'un point 
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de vue ergonomique, vous devez pensez a deux choses : d'une part fournir 
du feedback (c'est-a-dire penser a repondre ou acquiescer a ce que fait 
l'internaute), mais aussi fournir ce feedback de maniere appropriee. 



Donner du feedback aux actions de l'internaute 

Lorsqu'un internaute effectue une action sur votre site, vous devez lui 
repondre. Dans les interactions classiques de navigation de page en 
page, ce feedback ne pose en general pas de probleme. En effet, c'est le 
changement de page qui remplit ce role. Meme si les temps de chargement 
sont de plus en plus rapides avec la democratisation des connexions 
haut-debit, les apparences des pages sont en general suffisamment dis- 
tinctes pour que l'internaute voie qu'il s'est passe quelque chose. 

En dehors de ce fonctionnement classique, deux types de situations sont 
particulierement sensibles au manque de feedback. Tout d'abord, il 
existe des circonstances de navigation dans lesquelles le rechargement de 
la page n'est pas un signe suffisant pour alerter votre internaute. C'est 
notamment le cas lorsque la page de depart et la page d'arrivee sont tres 
semblables sur le plan visuel. Le rechargement de la page suffit alors 
d'autant moins qu'il est rapide. Pour optimiser ce type de feedback, vous 
devez reperer les process dans lesquels deux pages successives sont tres 
proches visuellement et vous debrouiller pour les differencier sur le plan 
perceptif Ce n'est toutefois pas la situation la plus critique. 

Le feedback est aussi particulierement important dans le cas d'un 
rechargement partiel de page. Lorsqu'une action realisee par l'internaute 
a un effet sur l'interface, vous devez le montrer visuellement. C'est par 
exemple ce que met en ceuvre l'interface de connexion sur le site du 
Credit Agricole : a chaque clic de l'internaute correspond un feedback 
sous la forme d'une etoile. 
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309536 51000"] 
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■=0 Cemander mon code personnel 
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Figure 5-74 Sur le site du Credit Agricole, 
I'affichage d'une etoile suite au clic sur un 

chiffre permet de donner un feedback 
a 1'intemaute sur I'efficacite de son action. 
Source : www.paris-enligne.credit-agricole.fr 



Visibility du feedback 

Ce n'est pas tant l'absence de feedback que son manque de visibilite qui 
est le defaut le plus frequent. Cela peut etre le cas s'il n'est pas assez fort 
visuellement, s'il est mal localise ou les deux a la fois. 

Regardez par exemple le feedback consecutif a l'ajout d'un article dans le 
panier sur le site de la Sultane de Saba (figure 5-75). 90 % des utilisa- 
teurs ne le verront absolument pas du fait de son emplacement (en bas a 
gauche de la page, alors que le regard de l'internaute est pose sur 
l'endroit ou il vient de cliquer) et de son manque de force visuelle. 

La meme remarque vaut pour le site du Tournaisis lorsque Ton ajoute 
des objets dans la liste de selection (figure 5-76). 



Dans ceuvre 

Le critere de feedback 

dans les interfaces en Ajax 

Nous abordons au chapitre suivant l'importance 
du feedback dans le cadre d'utilisations specifi- 
ques d'Ajax ou de Javascript. 
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Figure 5-75 

Sur le site de la Sultane de Saba, I'affichage de 

I'artide en bas a gauche du site est trop discret 

pour etre vu a coup sur par les internautes qui 

viennent de I'ajouter a leur panier. 

Source : www.lasultanedesaba.com 




Figure 5-76 

Sur le site du Tournaisis, I'affichage 

de I'element en bas a gauche du site 

est trop discret pour etre vu a coup sur 

par les internautes qui viennent de I'ajouter 

a leur selection. 

Source : www.tournaisis.be 
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Moins evident a detecter, un feedback peut etre parfait sur le plan visuel, 
mais devenir invisible dans certaines conditions d'utilisation. Ainsi, sur le 
site de Virgin Mega, la confirmation d'ajout au panier est scotchee en haut 
de l'ecran. Du coup, si je descends un peu dans la page pour ajouter un 
morceau au panier, je ne vois absolument pas le feedback de confirmation. 

Ce type de defaut est tres problematique, puisqu'il va inciter les inter- 
nautes a ajouter plusieurs fois le meme article dans le panier. Cela sera 



146 



@ virginmega.fr 



rages 1 1x15') te i^ d ,!l£l£teSfiE« 
^ 

us- Horirrah deport ^-m^^ 



Off re viLaHfl Jiaq \i'au 11 



AJDE - 

NEWSLETTER > 



ACCUEIL MUSIDUE VIDEO CLIPS | MOBILE | BILLETTERIE PHOTO PRESSE 
MEILLEURESVENTES NOUVEUITtS MAI HTEHAHT DISPO MP3 PRIX SMALL AJTOPROMJCTIONS SERVICES 



Vous etes ici : P.lusique / Var.inter, Pop, Rock/ Rock inde/ Meilleures Ventes 



) 



Q Les autres genres 



MEILLEURES VENTtS ALBUMS : M usique -Var.inter , Pop, Rock - Rock inde 

Voir aussi les meilleurs ventes 




Arctic Monkeys : - 

Favourite Voorst Nightmare [+ livret PC 
(album) 



The Calling 
Camino Palmero 
(album) 



Arcade Fire 
Neon Bible 
(album) 



Interpol 

Our Love To Admire 

(album) 

Interpol 

Our Love To Admire 

(album) 



Emily Haines 

Knives Dont Have Your Back 

(album) 

The Dead 60s 
Time To Take Sides 
(album) 



9.99 € 



9.99 € 



9.99 € 



9.99 € 



9.99 € 



9.99 € 



9.99 € 



9.99 € 



*W> 9.99 € 





y IHSCRFVEZVOUS0 


g"g] 






■jMjjnjiHH; 


Nojvelle Vague - Ncuvelle Vague - Edition 
Speciale (album) 


9.99 € x 




® Terminer ma commande 






ck inde 


> Voir les meilleures ventes litres 


ElflH Franz Ferdinand *fjS 
ifejM Franz Ferdinand 
^^^^ (album) 


9.99 € 


1Z 1 Arctic Monkeys iV - 
^ftf-^l Whatever Pec pis Say 1 Am, "hat 5 What Im Net 
^» (album) 


9.99 € 


** S Marquis de Sade *-fir^ 
■j Dantzig Twist 
^^M (album) 


9.99 € 


u - -7 Low iV - 

^ Long Division 
* ^ (album) 


9.99 € 


15 - 1 The Good, The Bad And The Queen ^j^ 
H The Good, The Bad And The Queen 
^^^M (album) 


9.99 € 


16, iftSI Kla * or,s 

^ Myths Of The Near Future [inclus 3 remix et 1 ine 
IS^H (album) 


9.9** 


1i '■ k Editors :■;■■ 
^M An End Mas A Start 
^^^^ (album) 


9.99 € 


1B ' S k Edllors 

jjL An End Has A Start 
^^^^ (album) 


9.99 € 



E 



I 

IT) 



m 



N ouve l ie Vagje 

Nouv 

(albu 



I Laji 

Homt 
I (albu 



Format 
Prix 



® WMA 
9.99 £ 
Duree : 52 mn 32 



Ecouter I'extrait 



MettreaiKpanier 
i Achat expfSssCB 



9.99 € 



9.99 € 



Figure 5-77 Sur le site de Virgin Mega, si Ton se trouve trap bas dans la page, on ne voit pas 
la confirmation d'ajout au panier qui s'affiche tout en haut du site. Source : www.virginmega.fr 

d'autant plus vrai qu'ils auront vu le feedback de confirmation lors 
d'ajouts precedents (ils s'attendront alors a le voir a chaque fois). 
Un dernier exemple peut etre trouve sur le site de vente en ligne de 
Colette sur lequel, si notre ecran a une resolution de 1024 x 768 pixels, 
le clic sur un article d'une liste semble n' avoir aucune consequence 
(figure 5-78). En effet, le seuil de scroll de reference se trouve alors a 
570 pixels, e'est-a-dire plus haut que la zone ou l'evenement a lieu. L'inter- 
naute peut done difficilement se douter que, suite a son clic, il s'est passe 
quelque chose, mais plus bas dans la page. 
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Figure 5-78 L'utilisateur qui 

consulte le site dans une resolution 

d'ecran de 1 024 x 768 pixels ne 

verra pas que le detail du produit 

s'est affiche en bas de page. 

Source : www.colette.fr 
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CARNETS DAY BOOK 



20,00 C 




B70 PIXELS 



A SAVOIR 
Do you speak hum a in ? 



Le vocabulaire que Ton utilise spontanement pro- 
vient de nos habitudes de langage. Les concep- 
teurs de sites Internet ont done trap souvent 
tendance a employer des codes de techniciens ou 
de specialistes du Web, dont la signification est 
obscure pour l'utilisateur final. 
Vous devez done essayer de revenir, par un effort 
conscient, a un vocabulaire plus proche du lan- 
gage naturel, que vos internautes seront a meme 
de connaitre et de comprendre. 



Regie n° 6. Comprehension : les mots 
et symboles sont choisis minutieusement 

Nous venons de voir dans la regie precedents que vous devez donner de 
l'information a votre internaute, mais cela ne suffit pas. En effet, vous 
devez lui parler correctement en employant des codes semantiques qu'il 
connait. 

La bonne utilisation des mots sur le Web 

Les mots sont une problematique centrale de l'optimisation des sites 
web pour leurs utilisateurs. Ce sont souvent des choses qui sautent aux 
yeux des habitues de la pratique ergonomique. Les mots sont des ele- 
ments faciles a repenser lorsqu'ils sont tres mal choisis. lis sont aussi 
generalement assez aises a modifier sur le plan technique. Cependant, le 
travail minutieux qu' exigent les mots est une tache extremement compli- 
quee, qui demande d'integrer simultanement beaucoup de parametres. 

Utilisez le vocabulaire ! 

Lun des defauts les plus frequents touchant le vocabulaire est qu'il nest 
pas utilise. Trop souvent, les concepteurs essaient de faire porter une idee 
par un symbole, une icone ou un caractere, comme s'ils ne disposaient pas 
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de mots pour vehiculer sa signification. Or, les mots sont presque les outils 
ideaux pour traduire un concept (presque seulement, parce qu'ils doivent 
satisfaire l'ensemble des regies qui suivent). Vous devez done profiter de la 
richesse de la langue et du fait que vos internautes la connaissent. 

Par exemple, sur le site de Rowenta, les items de la navigation outils 
(incluant tout de meme des liens aussi importants que Accueil, Ou acheter, 
Contact et Rowenta Global) sont uniquement presentes sous forme 
d'icones. Cela rend l'ensemble tres peu comprehensible et n'incite pas a 
l'utiliser : 
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Figure 5-79 

Sur le site de Rowenta, toutes les rubriques de 
la navigation outils sont representees par des icones, 
ce qui reduit leur utilisabilite. 
Source : www.rowenta.fr 



Recommandation 
Mais je n'ai pas de place ! 

Parfois, on n'utilise pas les mots par manque cri- 
tique de place a I'ecran. Dans ce cas, vous devez 
alors etre vraiment certain que vous n'avez pas 
d'autres moyens de presenter les informations. 
Puis vous devez reflechir a des moyens de con- 
tourner ce defaut. 

Vous pouvez notamment afficher une traduction 
textuelle de I'icone (ou une description plus 
longue de I'intitule de la rubrique) au survol de la 
souris. Attention alors a ne pas vous contenter 
d'une simple balise Alt (dont le contenu ne 
s'affiche qu'apres quelques dixiemes de secondes) : 
il est souvent preferable d'afficher une bulle des le 
survol de I'objet par le pointeur de souris. 
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Le meme principe est employe sur les trois sites suivants, alors que cela 
touche des espaces de navigation indispensables pour que l'internaute 
puisse acceder aux contenus du site (figures 5-80 a 5-82). 
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Figure 5-80 Sur le site de Cinebel, toutes 
les rubriques de navigation dans la fiche 
du film sont representees par des icones, 
ce qui reduit leur utilisabilite et leur 
pouvoir suggestif. 
Source : www.cinebel.be 




Figure 5-81 Sur le site des aventures 
de Lars par Rockwool, toutes les rubriques de 
navigation sont representees par des icones, 
ce qui reduit leur utilisabilite et leur pouvoir 
suggestif. Ce defaut est tout de meme 
compense par I'affichage d'un libelle 
au survol d'un item du menu. 
Source : www.lesaventuresdelars.com 
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Figure 5-82 Sur le site de Gruyere.com, 
toutes les rubriques de la navigation horizon- 
tale sont representees par des icones, 
ce qui reduit leur utilisabilite et leur pouvoir 
suggestif. Le defaut est accentue par 
la presence d'un autre menu en colonne 
de gauche, textuel cette fois, qui peut alors 
sembler etre le seul disponible. 
Source : www.gruyere.com 
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Les mots de la langue courante permettent de traduire dans l'interface 
une realite conceptuelle, afin de rendre celle-ci accessible aux inter- 
nautes. N'essayez done pas d'inventer des codes pour traduire les con- 
cepts ou vous prenez le risque que vos visiteurs passent completement a 
cote de ce que vous voulez leur raconter. 

Regardez par exemple comment le site de SFR Music gere Faeces aux 
nches artistes. Pour naviguer dans le catalogue artistes, on propose aux 
internautes un classement alphabetique. lis peuvent ainsi voir tous les 
artistes commencant par A, tous ceux commencant par B, etc. Pour des 
raisons de flexibilite, on leur propose aussi une fonctionnalite pour voir 
l'ensemble des artistes, de A a Z. Or, celle-ci est representee sous la 
forme d'un #. Utiliser ce caractere incomprehensible rend la fonctionnalite 
totalement invisible pour les internautes. 



Figure 5-83 

Sur le site de SFR Music, il n'est pas evident 

qu'en cliquant sur #, on puisse acceder 

a l'ensemble de la liste des artistes. 

Source : www.sfr.fr 
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Le site de Shu Uemura offre une autre illustration de ce type de defauts. 
L'internaute peut aj outer des produits a son panier des les pages de listes 
produits. Dans le cas de fonds de teint, il doit done choisir son coloris. 
Or, on ne lui propose pour cela qu'une liste deroulante libellee Select, 
presentant les options de couleur sous la forme du code numerique cor- 
respondant (figure 5-84). Ni le libelle, ni les nombres de la liste n'incitent 
ici a comprendre que Ton demande de choisir un code couleur. Ne peuvent 
done eventuellement s'en sortir que les clients habitues qui connaissent 
par cceur le code de leur produit. 
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Figure 5-84 Sur les listes produits du site 
de Shu Uemura, les coloris de fond de teint 
ne sont represents que par leur code. 
Difficile de faire son choix ! 
Source : www.shuuemura-usa.com 



Attention, ce n'est pas parce que Ton recommande d'utiliser les mots 
qu'il faut le faire himporte comment. En parti oilier, en aj outer ne doit 
pas vous servir a compenser d'autres termes mal choisis. Observez par 
exemple la complexite du message adresse aux nouvelles clientes sur le 
site de Promod, formule comme suit : Si vous effectuez voire premiere 
commande, saisissez ci-dessous voire mail puis cliquez sur decider au 
paiement pour voir la page "Coordonnees et Livraison" (figure 5-85). 
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Figure 5-85 

Sur le site de Promod, si on a besoin de fournir 

un tel message, c'est probablement que 

le libelle du bouton Acceder au paiement 

est mal choisi et ne correspond pas a la realite 

de Taction qu'il sous-tend. 

Source : www.promod.fr 



1 : Identification -2 : Vos coordonnees - 3 : Livraison - 4 : Recapitulatif et paiement 




Si vous effec'uez votre premiere CCHTimande. saisissez ci-dessous voire mail puis 
cliques sur acceder au paiement pour voir la page "Coordonnees et Livraison". 
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Le vocabulaire doit etre comprehensible 

Malheureusement, il ne suffit pas d'utiliser des mots du langage naturel 
pour etre compris des internautes. Pour ce faire, les termes doivent etre 
bien choisis. Un mot est facilement comprehensible s'il est auto-expli- 
cite, mais aussi s'il est devenu une convention sur le Web. 

Choisissez done le langage de vos internautes plutot qu'un langage de 
specialiste. Un langage de specialiste, ce n'est pas forcement des codes 
incomprehensibles avec des numeros, des caracteres speciaux, etc. Ce 
peut etre beaucoup plus insidieux. Ainsi, les defauts les plus courants 
consistent a utiliser un langage technique ou un vocabulaire d'entreprise 
inconnu des internautes. 

Ainsi, on rencontre souvent des termes tels que Trier par (au lieu de Affi- 
cher par), Visualiser (plutot que Voir), Editer (plutot que Modifier), etc. 
Regardez aussi comme les termes de page d'ouverture de session sur le 
site des Petites et d'item sur le site du Coq Sportif sont techniques : 



Figure 5-86 

Ce vocabulaire utilise sur le site des Petites et celui du Coq Sportif 

est oriente technique. II est done peu adapte pour les internautes. 

Sources : www.lespetites.fr/www.shoplecoq.com 
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Le vocabulaire doit etre oriente utilisateur 

Vous devez absolument utiliser les mots qui vont toucher vos internautes, 
avoir un sens pour eux. II faut done vous mettre a leur place et transposer 
dans leur langage ce que vous leur proposez. Orientez vos messages sur 
l'utilite qu'ont, pour vos internautes, vos contenus ou services. 

Par exemple, sur le site d'Universalis, 1'ofFre d'essai gratuite est presentee de 
maniere tres technique : on propose aux internautes d'Activer une periode 
d'essai. 
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Bienvenue dans I'Universalis en ligne 
I'encyclopedie e&g 



7 000 auteurs specialistes 

30 000 articles 

10 000 photographies 

9 000 clessins. tableaux. 

schemas 

400 cartes administratives 

et geographiques 

122 000 definitions 

et bien plus encore ... 



7 jours d'essai gratuit en 

acces illimite et sans 

obligation d'achat 



Activer une peri ode d'essai 



Figure 5-87 

Le vocabulaire utilise sur le site d'Universalis est oriente technique. II 
est done peu adapte pour inciter les internautes a s'inscrire, et peut 
meme les en dissuader. 
Source : www.universalis.fr 



De plus, les mots que vous utilisez sur votre site doivent permettre a vos 
internautes de savoir ou cliquer en fonction de ce qu'ils veulent faire. 
Veillez done a ce que votre vocabulaire soit exclusif, e'est-a-dire qua 
chaque concept corresponde un mot et un seul. Par exemple, sur le site 
des 3 Suisses, si vous avez envie de voir cette chaussure en plus grand, 
sur quel bouton cliquez-vous ? Zoom, Agrandir ou Zoom detail ? 
Meme si chacun de ces termes correspond a un fonctionnement tech- 
nique different pour les 3 Suisses, l'internaute ne doit pas en subir les 
consequences. Ce genre de defaut de vocabulaire arrive souvent lorsque 
l'interface est construite a partir des fonctionnalites et non a partir d'un 
point de vue utilisateur. 

L'utilisation d'un vocabulaire metier peut aussi produire des sites diffici- 
lement comprehensibles par les internautes. Par exemple, sur le site 
Internet d'Une Piece en Plus, la rubrique Les Sites « Une Piece en Plus » 
semble indiquer un acces aux differents sites web du groupe et non un 
acces a la liste geographique des centres. Ainsi, un terme courant dans le 
langage d'entreprise (Sites) devient contre-productif sur le Web. 
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Figure 5-88 Sur le site des 3 Suisses, 3 

options sont proposees qui semblent pouvoir 

afficher la chaussure en plus grand. 

Source : www.3suisses.fr 



une p&<& 
en plusm 







Vdus etei id : Setf-Stndujje poL - lei ^trtToiit-r 
Srtt-'-itirrkaF*. "JJnp Hivt »n JTekT 



r 0;Jei t-ce -qi^e- le self-it od&igr 



Qu'est-ce que le Self-Stockage "Une Piece en Plus' 




La self -stockaee vous permet d 'en Ire-poser vos meubles, vos cbjets , was archives, etc ... 
Vrms crrvke? vck Mens rlfliK rtps finite* Inrttvlrliirts fin taurp seVurfte. Yoik arrprtp? a votre Un* 
quand youu le iemihoite-z . Dans tous les sites "t/nt Piece en Pius" vous trouvere-z a votre etouteet a votre 
disposition, des equipes disponibles pour vous ofTrir un service adapte a vos be&oins. 
'Une PtofP en Ptrn;" : 

■ Vous c hoisissez La ta*? de votre box oe 1 a bU rn ; 

• Vuui uetcr niriei Id Uur ee L't vu L i e ,-lk. uLiuri 

• Vous scut posscdez la def do votre piece privative 

• Vni k. jflqHrwr mm KOJQ Mhrp et gratirir h votre piece 
» Vous profitez sur dac e de tout le materid oe manutention nece-ssairc 

{chariots, trans palettes, etc..) 

• Vrrns sbxlHZ en route sprunlrp itPW^urYellanrp 74hii'74| 



Figure 5-89 

Dans le menu de navigation principal 

du site d'Une Piece en Plus, I'entree 

Les Sites « Une Piece en Plus » n'indique pas 

clairement un acces a la liste des centres 

de stockage. 

Source : www.unepieceenplus.com 



153 



Figure 5-90 

Dans le pre-panier du site de La Redoute, 

le bouton Je continue peut sembler etre 

un moyen de passer a I'etape de 

commande de I'article. 

Source : www.laredoute.fr 



Enfin, ne jouez pas sur l'ambiguite sous peine d'enerver vos internautes. 
Evitez done d'utiliser un mot qui peut recouvrir plusieurs acceptions. En 
effet, ceux de vos visiteurs qui l'auront compris de la mauvaise maniere 
risquent de se sentir stupides ou manipules. 

Voyez ainsi comme le mot Je continue dans le pre-panier de la Redoute 
est ambigu (figure 5-90). Si l'internaute ne va pas plus loin, prend en 
compte le format et la localisation conventionnelle du bouton et ne 
s'interroge pas sur l'ensemble du libelle Je continue mon shopping, il esti- 
mera que ce bouton est le plus logique pour passer a I'etape suivante, a 
savoir « Continuer la commande ». Or, ce bouton sert plutot a continuer 
ses achats, e'est-a-dire a retourner dans le catalogue produits. 
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Le vocabulaire doit etre exact et precis 

Les mots que vous utilisez doivent representer le plus justement possible 
l'idee sous-jacente. Par exemple, sur cette ancienne version du site de 
Promod (figure 5-91), le terme de recherche express vous semble-t-il le 
plus approprie pour une recherche ou l'internaute peut specifier des styles, 
des produits, des coloris et des tailles ? 

Notez d'ailleurs que la page est appelee Recherche avancee dans la barre 
de titre et J'affine ma recherche au sein de la page. Ces termes, qui cor- 
respondent mieux a la realite de la fonctionnalite, sont des opposes de la 
formule Recherche express. 

Dans la nouvelle version du site Promod, la fonctionnalite est renommee 
Recherche personnalisee. On ajoute d'ailleurs a ce titre quelques ele- 
ments descriptifs pour en preciser encore l'utilite : Je choisis par taille, 
coloris, style, produit... (figure 5-92). 
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Figure 5-91 

Sur le site de Promod, des fonctionnalites 
de recherche tres avancees sont presentees 
sous le terme de Recherche express. 
Source : ancien site www.promod.fr 
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Figure 5-92 Le nouveau 
terme adopte pour designer 
la recherche personnalisee 
du site de Promod permet de 
mieux deviner le type de fonc- 
tionnalite qui se cache derriere. 
Source : www.promod.fr 
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De plus, pour etre utile, une information doit etre precise. Elle doit 
definir strictement ce a quoi elle renvoie. Ainsi, il n'y a aucun interet a 
proposer un lien Cliquez ici a vos internautes. Tournez plutot vos phrases 
de telle maniere que le mot-cle devienne le lien hypertexte permettant a 
l'utilisateur de naviguer. 
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VERIFICATION D'ELIGIBILITE 
Votre localite est bien desservie ! 

Pour continuer vos courses, digiiez ici , 
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Figure 5-93 Sur le site d'Ooshop, suite a la verification d'eligibilite de la commune, on devrait utiliser, 
plutot que I'actuel Cliquez ici, le terme Continuez vos courses en tant que lien. En effet, ces termes sont les plus signifiants 

pour I'internaute et determinent le fait qu'il clique ou non. 
Source : www.ooshop.fr 



Figure 5-94 Meme chose 

chez Promovacances, ou les termes 

Nos sejours au depart de province seraient 

beaucoup plus explicites que le lien Cliquez ici. 

Source : www.promovacances.fr 
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Figure 5-95 

Les deux liens Cliquez ici sur les sites de Pixmania 

et de ViaMichelin peuvent etre renommes 

pour designer precisement ce qu'ils recouvrent. 

Sources : www.pixmania.com / www.viamichelin.fr 



NAVi&ATtON &PS 

Circulez sans stress... 

Redecouvrez le plaizir de la 

route avec les solutions GPS 

ViaMichelin. 

Cliquez ici. 




NAVIGATION <kP& 

Circulez sans stress... 
Redecouvrez le plaisir de la 
route avec les solutions GPS 

ViaMichelin. 



156 



Le vocabulaire doit etre conventionnel 



Enfin, utilisez des mots que vos internautes connaissent. Cette recom- 
mandation est basee sur la regie n°4. Regardez par exemple comme, sur 
le site de Lamyline Reflex, on comprendrait mieux la fonction de tele- 
chargement de documents si elle etait designee par Telecharger plutot 
que Recuperer le document. 



E 



OH 

□ Recuperer le 
document 



Figure 5-96 

Sur le site de Lamyline Reflex, le libelle choisi 
pour le lien Recuperer le document ne permet pas 
de comprendre rapidement de quoi il s'agit. 
Source : www.lamylinereflex.com 
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Attention a ('utilisation des metaphores 

II peut etre utile de mettre en correspondance le systeme et le monde reel, 
sous reserve que l'analogie soit interessante et comprehensible immediate- 
ment. Attention done aux metaphores douteuses, qui risquent de perturber 
votre internaute ou d'opacifier une fonctionnalite interessante. Observez 
ainsi comme la fonctionnalite de selection de contenus est devalorisee par 
l'appellation Mon sac a dos sur le site Randonnees du Tournaisis. 
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Figure 5-97 

Sur le site du Tournaisis, le libelle Sac a dos 
ne permet pas de comprendre rapidement 
de quoi il s'agit. 
Source : www.tournaisis.be 



Si, malgre tout, vous mourez d'envie d'utiliser des metaphores pour per- 
sonnaliser votre site ou le rendre coherent avec votre charte redaction- 
nelle, pensez a fournir des moyens de contournement. De cette maniere, 
vos internautes pourront comprendre ce que vous voulez leur dire. C'est 
le cas du site web de l'editeur Didier Jeunesse, qui file la metaphore de la 
poule et de l'oeuf a travers ses pages, a tel point que la fonction d'impres- 
sion devient Pondre. Toutefois, pour limiter les difficultes de compre- 
hension, le concepteur ajoute la traduction web de ce mot (figure 5-98). 
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Figure 5-98 

Sur le site de Didier Jeunesse, la fonction 
d'impression est joliment nominee Pondre, 
mais on y ajoute le mot Imprimer afin 
d'expliciter le sens pour I'internaute. 
Source : www.didierjeunesse.com 



Le vocabulaire doit etre concis 

Lorsque vous choisissez un mot, vous devez prendre en compte sa sim- 
plicite. Votre objectif doit etre la plus grande concision possible. Cela ne 
signifie pas raccourcir systematiquement les mots a l'extreme, mais 
atteindre un compromis respectable entre longueur et comprehension. 

Surveillez done la longueur de chaque mot, mais aussi le nombre de mots 
composant un element (par exemple, un titre de rubrique). Le plus com- 
plique pour un concepteur est de faire le compromis entre les necessites de 
concision et de precision. En voici un exemple sur le site d'Aubert. 



Figure 5-99 

Le libel le du lien Recommander Biberon 

150 ml Initiation de Dodie a un(e) 

ou plusieurs de vos proches 

est assez precis, mais trap long. 

Source : www.aubert.fr 



*- Recommander Biberon 150 ml Initiation de Dodie a un(e) ou 

plusieurs de vos proches 
*■ Don nez votre avis ! 



ASAVOIR Pourquoi la balise Title est-elle 
importante pour une synthese vocale ? 

Rendez-vous a la fin du chapitre 3 pour com- 
prendre comment la synthese vocale va lire la 
balise Title, et pourquoi e'est important en vue 
d'optimiser I'accessibilite visuelle. 



A cause de la contextualisation de la fonctionnalite pour un produit 
donne, le libelle devient trop long et on perd l'essence du message (e'est- 
a-dire Faction sous-tendue par le lien Recommander). L'emplacement de 
ce lien, directement sous l'image, est largement suffisant pour effectuer 
ce rapport entre la fonctionnalite et son objet. L'intitule actuel peut tou- 
tefois apparaitre dans la balise Title afin d'optimiser le traitement du 
lien par une synthese vocale ainsi que le referencement. 
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Les symboles et codes doivent etre comprehensibles 

Les internautes qui viennent sur votre site sont charges de leur histoire, de 
leurs habitudes et de leurs apprentissages, a la fois vis-a-vis du monde reel 
et des interfaces homme-machine. Vous devez done vous adapter aux a 
priori qu'ils portent en eux afin de faciliter la comprehension de votre site. 
Les codes et symboles que vous utilisez doivent etre les plus clairs possi- 
bles. Par exemple, vous devez utiliser la couleur a bon escient, en respec- 
tant les symboliques associees dans la culture occidentale. Choisissez des 
couleurs appropriees en fonction de la signification de base du message a 
faire passer. Ainsi, pour l'affichage de messages, veillez a n'utiliser le 
rouge que dans le cadre d'alertes et, plus precisement, pour attirer 
l'attention sur des choses « qui ne vont pas ». 

Pensez aussi toujours a la regie n° 2, et plus particulierement a limiter la 
charge informationnelle. N'utilisez la couleur que lorsque cela presente 
un interet. En effet, e'est une information que notre cerveau doit aussi 
traiter. La presence de couleurs peut done surcharger le traitement 
mental de la page. 

Enfin, lorsque vous utilisez des icones, le plus difficile est de faire corres- 
pondre ce qu'elles representent avec leur fonction. Elles doivent aussi 
etre comprehensibles par les internautes. Essayez au maximum d'utiliser 
des icones que vos visiteurs connaissent deja. 

Attention a l'emploi d'icones par extension. C'est par exemple le cas de 
l'icone de corbeille associee au libelle Ajouter a ma selection, visible sur 
la page de confirmation d'ajout au panier du site de la Fnac. 
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Recommandation 
Dans I'ideal, icone + libelle 

Meme lorsque vous utilisez des icones tres con- 
ventionnelles, si la place n'est pas un critere cru- 
cial dans votre page, n'hesitez pas a les 
accompagner d'un libelle explicite. Ce peut etre le 
cas, par exemple, d'une fonction d'impression. 
Ajouter un libelle a une icone presente ces autres 
avantages de mettre en avant la fonctionnalite et 
de faciliter son die (rappelez-vous a cet egard la 
loi de Fitts que Ton evoquait au chapitre 3). 
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Figure 5-100 Sur la confirmation d'ajout au panier du site de la Fnac, on utilise une icone « corbeille » pour representer le passage 

de I'article du panier a la liste de selection (en 1 ). Si Ton regarde la meme icone dans le panier, elle est alors utilisee pour representer 

la suppression definitive d'un article du panier (en 2). Source : www.fnac.com 
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Cette meme icone est d'ailleurs reutilisee dans le panier afin de repre- 
senter la fonction de suppression. Elle est done utilisee dans deux con- 
textes pour representer deux actions tres differentes. 

Regie n° 7. Assistance : le site aide 
et dirige l'internaute 

Notre septieme regie indique que le site doit etre concu de maniere a 
assister l'internaute tout au long de sa visite. Pour la comprendre, il faut 
necessairement distinguer l'aide qui ne se voit pas (qui releve plutot de 
i'accompagnement de l'internaute) des contenus d'aide explicites (qui 
sont plutot des textes explicatifs). 

Dirigez grace a ['organisation et a la visibility 

Dans l'optique de diriger au mieux vos visiteurs, tout ce dont ils peuvent 
avoir besoin doit etre visible, qu'il s'agisse d'objets, d'actions, d'options 
ou de moyens d'y acceder. Ainsi, vous ne chargez pas la memoire de vos 
internautes : ils n'ont pas a retenir d'informations d'une page a l'autre. 
Dans ce cadre, la visibilite des outils de navigation principaux est primor- 
diale. Si Ton revient sur le site de Rowenta, on s'apercoit que la barre de 
navigation principale, par son manque de visibilite (en bas de l'ecran, 
mais aussi dans un format trop leger), ne remplit pas son role d'incitation 
a la navigation. 



Figure 5-101 

Le site de Rowenta n'assiste pas ses internau- 
tes dans leurs besoins de navigation du fait 
d'une trop faible visibilite de la barre de menu 

principale. 
Source : www.rowenta.fr 
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Sur le site du Tournaisis, ce manque de visibilite s'ajoute a un probleme 
d'organisation fonctionnelle et visuelle. Ainsi, dans la page des Activitis 
& loisirs, on met en avant 2 elements (sur un total de 21). Les autres sont 
accessibles dans la colonne de droite, via le lien Toutes les activitis & loi- 
sirs (21). Or, lorsqu'on arrive sur cette page, on a l'impression que le site 
du Tournaisis ne propose que 2 activites : en effet, Faeces a toutes les 
activites n'est pas assez visible et pas assez lie visuellement a la liste des 
2 activites mises en avant (figure 5-102). 



Bienvenue dans le Tournaisis 
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Recommandation 

II faut rendre visible 

ce que I'internaute n'attend pas 

Les defauts de visibilite sont critiques lorsque 
I'internaute ne se doute pas du volume d'informa- 
tions proposees par le site, lis sont done surtout 
problematiques quand celui-ci ne sait pas que 
quelque chose existe. La visibilite et I'organisation 
visuelle sont alors de tres bons moyens pour 
diriger le regard de votre visiteur et I'inciter a uti- 
liser votre site. 



Figure 5-102 

L'interface choisie pour cette page semble 
suggerer que le site du Tournaisis ne propose 
que deux Activites et Loisirs. 
Source : www.tournaisis.be 
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Un probleme similaire de visibilite et d'organisation visuelle fait que, sur 
la page Nos Contacts du site d'Isabel Marant, on a le sentiment que les 
seuls contacts disponibles sont ceux presentes sur cet ecran. Or, tout en 
haut, il y a un lien Prochaine page qui permet d'acceder a la suite des 
contacts (figure 5-103) 

Si vous dirigez bien votre internaute, il doit comprendre tres rapidement 
ce qu'on attend de lui lorsqu'il arrive sur une page ou qu'il en analyse une 
zone. Prenons un exemple sur le site d'Alain Afflelou : le centre de la 
page etant tres mal organise, I'internaute doit reflechir a ce qu'il doit 
faire, alors que ce que Ton attend de lui est tres simple (a savoir : choisir 
entre optique et solaires). Revenez toujours a ce niveau fondamental : 
que proposez-vous a I'internaute ? Lorsque vous aurez repondu a cette 
question, vous verrez qu'il est plus facile de presenter votre interface de 
facon a traduire parfaitement cette proposition (figure 5-104). 
Ici, l'interface ne traduit pas assez bien la dichotomie entre solaires et 
optique, alors que Ton cherche justement a faire choisir I'internaute entre 
les deux. Ce choix devrait done s'imposer a lui des qu'il arrive sur la page. 



Recommandation 

Organisation visuelle, 

call to action et visibilite sans scroll 

II doit se degager de votre page des espaces 
d'informations et une vision claire de ce qui est 
attendu de I'internaute. Ainsi, ce dernier ne doit 
pas chercher un bouton d'action. Pensez toujours 
a presenter les informations capitales au-dessus 
du seuil de visibilite sans scroll. Pour aller plus 
loin, rendez-vous au chapitre 9 oil nous vous expli- 
quons comment prendre en compte cette limite. 
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Figure 5-103 L'interface choisie 

pour cette page semble suggerer 

qu'elle contient I'ensemble 

des contacts fournis sur le site 

d'lsabel Marant. 

Source : www.isabelmarant.tm.fr 
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Figure 5-104 L'interface choisie pour cette page presente separement deux elements de navigation 
identiques : les libelles Optiqueet Solaire, et les visuels des lunettes correspondantes. On a done besoin 
d'ajouter une legende Cliquez sur les lunettes car I'organisation visuelle n'assiste pas assez I'internaute. 

Source : www.alainafflelou.com 

Souvent, il ne manque pas grand chose pour qu'une interface fonctionne 
cote utilisateur et guide ce dernier de maniere efficace. Les artifices gra- 
phiques sont un bon moyen de diriger le regard afin de faciliter la com- 
prehension d'une page. Par exemple, sur la page Nos auteurs et 
illustrateurs du site de Didier Jeunesse, il est dommage que I'internaute 
puisse se satisfaire de cette premiere liste d'auteurs en pensant qu'elle est 
complete (figure 5-105). En fait, cette premiere page ne fait apparaitre 
que les auteurs dont le nom commence par la lettre A. Or l'interface ne 
guide pas assez I'internaute pour qu'il comprenne cela rapidement. Ceci 
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est du au manque de relation visuelle entre le menu alphabetique et la 
liste, associe a l'absence de feedback positionnel (de type : « la lettre A a 
un format different parce que je suis dans la page des A »). 



Didier y^ju^ 
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Figure 5-105 

Sur le site de Didier Jeunesse, I'interface choi- 
sie pour cette page semble suggerer qu'elle 
contient I'ensemble des auteurs et illustra- 
teurs. II faut se rendre compte que tous 
commencent par la lettre A pour chercher 
un moyen d'atteindre les autres lettres. 
On demande done a I'internaute de faire un 
effort qui devrait etre supporte par I'interface. 
Source : www.didierjeunesse.com 
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^organisation visuelle d'une page peut aussi tromper votre internaute. 
Ainsi, chez Amazon, qui adopte un design elastique dans sa page de paie- 
ment. Ce principe a pour consequence que, sur un ecran large, le champ 
du cryptogramme visuel risque d'etre souvent oublie, car il se trouve perdu 
dans I'interface. En effet, les internautes renseignent leurs informations 



amazon.fr 
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Figure 5-106 Sur le site d'Amazon, I'organisation visuelle sur un ecran large fait que le champ cryptogramme 

risque d'etre frequemment oublie par les internautes. 

Source : www.amazon.fr 
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bancaires de gauche a droite, en commencant par remplir le type de carte, 
son numero, puis le nom du porteur et la date d'expiration. A ce moment, 
leur souris se trouve toute proche d'un bouton Continues Continuer semble 
done etre la prochaine action la plus logique a effectuer. Or, ce faisant, 
l'utilisateur oublie le champ Cryptogramme visuel, situe completement a 
gauche de l'interface (figure 5-106). 



A SAVOIR 

Les defauts de logique 

de die et d'organisation visuelle 

peuvent etre simultanes 

Cet exemple sur le site de SFR Music conjugue un 
probleme de die illogique avec une mauvaise 
organisation visuelle (cf. notre point precedent). 
En effet, I'expression Ecouter un extrait et le 
bouton correspondant sont tres eloignes I'un de 
I'autre. Cette presentation vous parait-elle res- 
pecter la loi de proximite que nous evoquions au 
chapitre 3 ? 



Dirigez grace a des elks logiques 

Les internautes s'attendent toujours, au vu de ce que vous leur presentez, a 
pouvoir agir d'une certaine maniere sur votre site Internet. Facilitez-leur la 
tache en vous adaptant a leur logique de fonctionnement. En particulier, 
e'est l'element ayant permis la prise de decision qui doit etre cliquable. 
Ainsi, sur le site de SFR Music, lorsque l'internaute voit le mot Ecouter un 
extrait et qu'il a effectivement envie d'ecouter un extrait, que va-t-il faire ? 
Logiquement, il va cliquer sur ce mot. Or cette action haura aucun effet. 
S'il reclique en croyant avoir mal clique la premiere fois, il ne va toujours 
rien se passer. Alors, dans le pire des cas, l'internaute partira du site, per- 
suade qu'il fonctionne mal. S'il est un peu plus tenace, il va chercher un 
autre objet sur lequel cliquer pour lancer l'ecoute de 1' extrait. Alors seule- 
ment, il apercevra l'icone en forme de haut-parleur. 



Figure 5-107 

Sur le site de SFR Music, il paraitrait logique 
que l'element signifiant (ici, le libelle Ecouter un extrait) 
soit cliquable, au meme titre que l'icone de haut-parleur. 

Source : www.sfr.fr 




Artiste : Justice 

Album: D.A.N.C.E 

Single : DANCE (Radio Edit) - Chorus 
Genre : House / Electro 

Ecouter un extrait 

L'album: Cet album n'est pas 
disponible a la vente actuellement 



h Le single P.1obile + PC 

elechargez ce titre en integrate sur votre mobile 
et meme sur votre PC si vous le souhaitez. 



La sonnerie Hypersound 

Offrez-vous cette sonnerie en qualite CD, avec la voix de lartiste ! 
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Recommandation 

Faites au moins correspondre votre 

legende a I'objet concerne 

Informer l'internaute, a I'aide d'un texte, qu'il doit 
« cliquer sur un bouton pour accomplir une action 
donnee » est deja ennuyeux d'un point de vue 
ergonomique. £a Test encore davantage lorsque le 
bouton est loin de cette legende et porte une autre 
appellation, voire pas d'appellation du tout. (Voir 
par la suite I'exemple Acheter maintenant sur 
le site de SFR Music). 



Dans cet exemple, le clic n'est pas logique puisque ce n'est pas l'element 
decisionnel qui est cliquable. Ne rendez pas la tache de l'internaute plus 
difficile et attribuez done un caractere cliquable aux elements les plus 
pertinents. 

Dans le meme ordre d'idees, il est tres courant de voir des sites ou Ton 
indique a l'internaute de cliquer sur un bouton pour accomplir une 
action (de type « Cliquez sur le bouton Machin pour faire Machin »). 
Pourquoi dans ce cas ne pas rendre cette legende elle-meme cliquable ? 
Regardez I'exemple sur le site de Carglass (figure 5-108). 

Le meme type de precede est utilise sur le site de Nivea, pour inciter a 
l'utilisation de la navigation par onglets (figure 5-109). 
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Figure 5-108 Sur le site de Carglass, on demande aux internautes de Cliquer sur le bouton "Prendre 

un Rendez-vous en ligne " pour organiser votre RDV. lis doivent done lire cette phrase, puis chercher 

le bouton correspondant, alors que la phrase elle-meme pourrait etre cliquable et, ainsi, 

leur permettre d'atteindre leur objectif plus facilement. 

Source : www.carglass.fr 
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Figure 5-109 

Sur le site de Nivea, on dit aux internautes : 
Pour en savoirplus, cliquez sur Details. 
lis doivent done lire cette phrase, puis chercher 
le lien correspondant, alors que la phrase 
elle-meme pourrait etre cliquable et permettre 
d'afficher le contenu de I'onglet Details. 
Source : www.nivea.fr 



Par cette legende, on attire l'attention sur un onglet qui manque de visi- 
bilite. C'est done deja mieux que rien. De surcroit, cela signifie que les 
concepteurs ont conscience du fait que les internautes risquent de rater 
cet onglet. Mais il faut profiter de cette indication textuelle et la rendre 
interactive pour quelle soit cliquable, au meme titre que I'onglet ! Pensez 
toujours a utiliser la puissance du Web pour servir vos internautes. 
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Dans ce livre 
Tout savoir sur la notion d'affordance 

Pour approfondir le sujet des affordances, rendez- 
vous au chapitre 3 ! 



Dirigez grace aux affordances 

Lorsqu'on park de diriger, c'est diriger dans la bonne direction... Vous 
devez reussir a ce que les internautes reperent tres vite ce qui est cli- 
quable sur votre site et ce qui est « actionnable » (champ de saisie, ele- 
ments de selection de formulaires, etc.). Ces caracteristiques d'action 
(suggerees par la forme et le comportement des objets) sont ce que Ton 
appelle leurs affordances. 



Point devue 

Les affordances dirigent 

les internautes vers Taction 

Indiquer ce qui est ou non cliquable permet de 
diriger correctement vos visiteurs et de les inciter a 
agirou pas. 

Lorsque vous voyez un element qui semble cli- 
quable et un autre qui semble inactif, c'est comme 
si vous vous trouviez face a une porte entrouverte 
et une autre fermee par des scelles. 



Figure 5-110 

Sur le site du Tournaisis, on a I'impression 

que le bouton En savoir + et le lien Toutes 

les activites & Loisirs (21) ne sont pas 

cliquables, parce qu'ils sont presented en gris 

ou dans une couleur tres claire. 

Source : www.tournaisis.be 



Les affordances permettent de reperer ce qui est cliquable 

Un des defauts frequemment constates dans les sites web consiste a fournir 
des indices suggerant « ceci nest pas cliquable ». C'est par exemple le cas 
du bouton En savoir plus sur le site du Tournaisis, mais aussi du lien 
Toutes les activites, qui semblent non disponibles parce qu'affiches dans 
des couleurs a connotation inactive. 



Bienvenue dans le Tournaisis 
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Si vous ne pretez pas attention aux affordances, vous vous exposez au risque 
de voir vos internautes manquer des elements essentiels de votre site. C'est 
particulierement dommage dans le cas des barres de navigation. Celles-ci 
doivent etre suffisamment affordantes au clic pour etre percues et utilisees 
par votre internaute. Regardez par exemple comme le format adopte pour 
la navigation secondaire du site de Decleor n'incite pas a Taction. 
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Habituellement percue comme un savoir empirique et 
poetique, I'Aroma-CoBmetique s'avere etre une science qui 
utilise les extra its les plus actifs des plantes aromatiques: les 
huiles essentielles - pour le soin de la peau. 

Gorgees d'actifs f les huiles essentielles se decomposent en 
plusieurs centaines de molecules qui agissent en synergie. 
Ces concentres tres puissants demandant done une 
competence de specialiste pour assurer un controls qua lite 
permanent, de la selection de I'espece botanique a 
I'assurance d'une purete absolue de I'huile essentielle ou 
toutes ses molecules sont preservees. 
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Figure 5-111 

Sur le site de Decleor, la navigation 
secondaire n'est pas assez affordante 
au die. Elle a done moins de chances 
d'etre utilisee par les internautes. 
Source : www.decleor.fr 



i 

IT) 



D'autre part, choisissez bien les elements cliquables et profitez des affor- 
dances naturelles. Les phrases formulees a l'innnitif ou a l'imperatif, qui 
suggerent une action de la part de l'internaute, sont sans conteste celles 
qui sont le plus affordantes pour une cliquabilite sans effort. Lorsque 
vous presentez des phrases de ce type, elles doivent forcement etre cli- 
quables. C'est ce qui explique les inconvenients des legendes non cliqua- 
bles que nous avons vues precedemment en exemple. 



ROGERtGALLET 



Carta 
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■ Invitation a decouvrir (a nouveaute 
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Les images de produit (attention, de produit, et pas n'importe quelles 
images) sont egalement tres affordantes pour la cliquabilite. Par exemple, 
sur le site de Roger & Gallet, si Ton est interesse par les produits Doux 
Nature a la seve de vanille, on a naturellement envie de cliquer sur les 
photos de ces produits (beaucoup plus que sur le texte Invitation a decouvrir 
la nouveaute, qui est moins affordant au clic). Or, le texte est ici le seul 
element cliquable pour acceder a des informations detaillees sur les produits 
a la seve de vanille. 



Figure 5-112 

Sur la page d'accueil du site de Roger & Gallet, 
I'element le plus affordant pour acceder 
aux produits Doux Nature a la seve 
de vanille est le visuel des produits. 
Or, ce dernier n'est pas cliquable. 
Source : www.roger-gallet.com/fr 
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ASAVOIR 
Le rapport entre le guidage 
de I'internaute et sa rapidite 

Diriger I'internaute, c'est aussi lui permettre 
d'accomplir plus rapidement ses activites, puisque 
la page est construite de maniere logique et ne le 
force pas a chercher ce qui I'interesse. 



Les affordances permettent de reperer ce qui est utilisable 

II est important que vos internautes reperent les elements avec lesquels ils 
peuvent interagir sur votre site, notamment les champs de saisie. Vous devez 
done les aider dans cette tache, ce que permettent deux recommandations 
principales : d'une part, ne pas remplir les champs de saisie (avec le titre du 
champ ou un exemple du type de donnees attendues) et, d'autre part, les 
presenter sur un fond de couleur arm de mettre en avant le blanc du champ. 
Le site de Surcouf et celui de Blogger le font par exemple tres bien. 



Figure 5-113 

Sur le site de Surcouf et celui de Blogger, 

I'utilisation d'une couleur de fond sous les 

champs de connexion au compte utilisateur 

augmente fortement leur facilite de reperage 

en tant que champs de saisie. 

Sources : www.surcouf.fr/www.blogger.com 



Vous avez deja un compte ? 



Mot de passe 



► Motde passe oualie ? 



Connectez-Yous a i'aide de votre compte 
Google 



CONNEXION 



Ces recommandations sont celles qui vous permettront de mettre 
l'accent sur les elements utilisables. Vous pouvez done vous en affranchir 
si le reperage des champs de saisie n'est pas capital. 

Enfin, pensez que vos elements peuvent prendre des affordances tempo- 
raires. Par exemple, un champ peut, par son format, suggerer «Je suis le 
champ actif, celui dans lequel se trouve le curseur, que vous allez remplir ou 
que vous remplissez en ce moment ». Ce type de presentation accompagne 
I'internaute dans ses actions de maniere tres rassurante. Par exemple, sur le 
site de Meetic, des que I'internaute place son curseur dans un des champs 
(et jusqu'a ce qu'il en sorte), ce dernier prend un format visuel particulier : 



FidUre 5 — 114 Man pseudanyme 

Sur le site de Meetic, le champ actif prend une affordance wan mat de passe 

temporaire qui guide I'activite de saisie. Mon adresse email 
Source : www.meetic.fr 
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La mise en valeur du champ actif peut etre realisee grace a un element 
graphique ajoute au champ (comme dans l'exemple precedent), ou en 
modifiant les proprietes de style du champ en question (couleur de fond, 
couleur et epaisseur du contour). 



Figure 5-115 

Sur le site du Loto, le champ actif prend 
une affordance temporaire qui guide I'activite de saisie. 

Source : www.loto.fr 
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Attention a ne pas diriger de facon erronee 



Le manque de justesse et de precision induit en erreur 

Soyez precis dans les explications que vous donnez a vos internautes, sous 
peine de les induire en erreur. Par exemple, sur le site de SFR Music, on 
indique aux internautes Cliquez sur le bouton « Acheter maintenant » 
face au contenu choisi. Void ce bouton : 



E 



Figure 5-116 

Auriez-vous pense qu'il s'agissait 
du bouton Acheter maintenant 1 
Source : www.sfr.fr 
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Les contre-affordances induisent en erreur 

Comme nous le disions au chapitre 3, attention aux affordances erro- 
nees, ou contre-affordances. Ce phenomene concerne des elements qui 
se deguisent en ce qu'ils ne sont pas, trompant done les internautes. Ces 
derniers risquent alors de faire des erreurs, soit en cliquant sur des ele- 
ments qui ne sont pas cliquables, soit en pensant qu'un element n'est pas 
cliquable alors qu'il Test. Prenons en exemple ce menu deroulant du site 
de la Francaise des Jeux. 



*■ 
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1000 00O€ 
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Figure 5-117 

Sur le site de la Francaise des Jeux, le mot 
Vot/erpresente une contre-affordance au die. 
semble permettre d'acceder directement au 
jeu en ligne, alors que ce n'est pas le cas. 
Source : www.fdjeux.com 



Si vous avez envie de jouer au Loto en ligne, que faites-vous ? Vous allez 
d'abord probablement reflechir a deux fois, puis eventuellement decider 
de cliquer sur Jouer : si ce lien est la, e'est que le premier lien, Loto, doit 
mener sur une presentation generale du loto. Si vous avez envie 
d'acceder rapidement a l'interface de jeu en ligne, vous cliquez done sur 
Jouer. Et cliquez une seconde fois, parce qu'on dirait que vous avez 
clique a cote. Puis une troisieme, parce qu'il semble que le site n'a pas 
compris. Sauf qu'il n'a aucune chance de comprendre, parce que le mot 
Jouer n'est pas un lien. 
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Eau Ressourcante 

Sentir bon r se sentir si 
bien. Parfum relaxant du 
basilic, de I ' i ris r du cedre 
et du benjoin, bien etre 
avec la salsepareille, le 
robinier et le longane. 
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Dans cet exemple, le recours a un element extremement affordant (le 
mot Jouer) induit l'internaute en erreur et perturbe la fluidite de son par- 
cours dans le site. 

Dans le meme ordre d'idees, les affordances de votre site ne doivent pas 
inciter a utiliser un outil inutile. Prenons cet exemple sur le site de 
Clarins : les concepteurs ont prevu que les internautes puissent choisir le 
conditionnement d'un produit, alors que la plupart des produits 
n'offrent qu'un seul conditionnement (par exemple, un tube de 50 ml). 
Or la presence permanente de la liste deroulante correspondante incite a 
son utilisation et risque done de decevoir les internautes qui auraient 
souhaite un conditionnement different. 




Masque Contour des Yeux 

Laissez agir 5 mn le petit 
palmier scie r I 'eg Ian tier, 
I'abricot, I 'extra Et de 
chicoree et I'eau de rose,,, 
Bien etre immediat r 
regard frais, paupieres 
lissees. 






Demaquillant Tonic Express 

Vite fait, tres bien fait, un 
demaquillage sans rincage 
renovateur d'eclat grace a 
la seve d'orange toniFiante 
et aux graines de moringa 
detoxiFi antes. 



-chefcerBT 



-chsfcer jl" 



Figure 5-118 Meme si vous avez prevu la possibility technique pour les cas oil un produit propose plusieurs conditionnements, 
vous devez eviter de faire figurer I'outil dans les cas ou un seul conditionnement est disponible. 

Source : www.clarins.fr 

Les affordances percues generent des reflexes ! 

Lorsqu'on dit qu'un element possede une grande affordance au clic, cela 
signifie aussi que les internautes auront le reflexe de cliquer dessus s'ils cher- 
chent a accomplir une action. II vous faut done veiller a ne pas induire vos 
utilisateurs en erreur si plusieurs elements de votre interface sont cliquables. 

Observez ainsi cet exemple sur le site de Netvibes. Dans l'ancienne ver- 
sion de l'interface, les utilisateurs disposant d'un compte et souhaitant 
s'y connecter risquaient de se tromper de bouton d'action. En effet, le 



Figure 5-119 Sur I'ancien site de Netvibes, 

les utilisateurs souhaitant cliquer sur le bouton 

Sign in risquaient de le confondre avec le bouton 

Sign up, du fait de la grande affordance au clic de 

ce dernier, et de son emplacement a proximite 

du champ Password. L'effet est encore accentue 

par la forte ressemblance en langue anglaise 

des termes Sign in et Sign up. 

Source : ancien site www.netvibes.com 



Sign in a 


Email: 

Password: Gost password?) 


Not a member yet? 

Sign up 






H Remember me 


more info on 


1 Sign in 1 
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bouton le plus affordant au clic etait en fait celui correspondant a la 
creation de compte. Sur la nouvelle interface (figure 5-120), le defaut 
est resolu par une reorganisation de l'espace et une nouvelle presentation 
visuelle. 




E 



Figure 5-120 Sur le nouveau site 
de Netvibes, les utilisateurs souhaitant 
cliquer sur le bouton Sign in ne risquent 
plus de le confondre avec Sign up, car 
les deux entrees sont bien differenciees. 
Source : www.netvibes.com 
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Ce type d'erreur lie aux affordances percues possede en general un carac- 
tere tres persistant, c'est-a-dire que l'erreur risque de se produire a repe- 
tition, tant le bouton incite au clic de maniere presque reflexe. L'effet est 
encore accentue par le fait que les utilisateurs reguliers ont tendance a 
moins analyser l'interface avant de se decider a cliquer. 



Evitez d'avoir a dinger grace a un modele 
d'interaction adapte 

Si vous pouvez eviter d'avoir a diriger votre internaute, profitez-en ! Le 
guidage de votre internaute n'est finalement qu'une reponse a une pro- 
blematique d'interaction complexe. Plus ce que vous demandez a votre 
internaute est simple, moins vous risquez de le perdre en chemin. Autre- 
ment dit, moins votre modele d'interaction necessite d'actions de sa 
part, moins vous aurez besoin de le guider. 

Prenons comme exemple la modification d'une quantite dans un panier. 
Selon le modele d'interaction que vous choisissez, vous aurez ou non 
besoin de guider votre internaute. Ainsi, on peut concevoir le systeme de 
telle sorte que le panier recalcule le montant en temps reel, en fonction 
des modifications apportees par l'internaute. A l'inverse (et c'est malheu- 
reusement le cas le plus courant), on peut demander une intervention de 
la part de l'internaute sous la forme d'un clic sur un bouton Recalculer 
(voir figures 5-121 et 5-122). 

Satisfaire ce critere peut amener a preferer un element d'interface a un 
autre (par exemple, des boutons decrementation et de decrementation 
plutot qu'un champ quantite, s'il est techniquement difficile de reperer 
que l'internaute est sorti du champ). 



Dans ce livre 

Le rapport de dependance entre nombre 

d'actions et rapidite de l'internaute 

Nous verrons par la suite que cette recommanda- 
tion peut recouper la regie de rapidite (moins l'inter- 
naute doit faire d'actions, plus il peut etre rapide). 
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Disponibilite 




Prix TTC 




HP Pavilion a6167.fr et ecran 20" TFT ♦■ Pocket Media Drive SO Go 
| ► Voir tous les services & accessoires associes | 


Expedie sous 24h 


u 


399,00 € 
dont eco-cart : 2,00 € 


s 




TOTAL Hors frais livraison : 




► Recalculer 


399,00 6 




Frais de livraison (pour la France metropolitaine) 






35,00 € 




Total de voire commande (1 article) 






934,00 € 






^ Vous heneficiez d'un code auantage ? 
^ Vous heneficiez d'un bon de reduction ? 













4 Poursuiure mes achats 



Poursuiure ma commande 



Figure 5-121 Sur le site de la Fnac, I'internaute doit cliquer sur un bouton Recalculer 
apres avoir modifie une quantite dans le panier. Source : www.fnac.com 



Quantity Prix a I'unite 




Petits Heurtres et Fa its Divers 

(ajoute le L9-QS-2QQ7) 
livraison en 48 h 

r^l Paquet cadeau / message 







Frais de port : 


5,50 € 


\^b Choislssez votre lieu de livraison France Metropolitaine et Corse 


H 


Si vous possedez un numero de bon de reduction, entrez le ici et cliquez sur "Verifier" 




TOTAL : 


32,50 € 


| | ^gg^i 





Vers les Infos Livraison 



Figure 5-122 Sur le site de Reservoir Jeux, le montant du panier se met a jour automatiquement des que I'internaute 

modifie une quantite dans le panier. II n'y a done pas besoin de fournir un bouton Recalculer. 

Source : www.reservoir-jeux.com 

En outre, avec la meme solution de base, I'internaute peut se trouver 
plus ou moins bien dirige. Par exemple, la plupart des sites qui integrent 
un bouton Recalculer ne verifient pas si I'internaute a modifie des quan- 
tites avant de valider son panier : ils le laissent ainsi passer a la suite sans 
prendre en compte ses modifications. Heureusement, ce type de situation 
est parfois prevu. Ainsi, sur le site de Nicolas (figure 5-123), le modele 
d'interaction defaillant est compense par un systeme de protection contre 
l'erreur, qui guide I'internaute vers le bouton Recalculer. 

Cependant, si Ton est capable de faire cette verification technique lors 
du clic sur le bouton Valider ma commande, on doit etre capable de 
mettre a jour le montant du panier en fonction des quantites saisies par 
I'internaute. 
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1 Hon panier 


2 Caordonn^cs 3 Livraison 4 Paiement 


> 


5 Rccapitulatif 


Vous avez 42 article(s) dans votre panier 



La page sur http://www.nicolas.com dit : 

Vous avez modifie la quantite d'un ou plusieurs articles, vous devez recalculer I e total avant de 



^QuiiMSte p.T. TTC 

L2L.80 EUR \ 



/t\ vousav 
L*-i valider. 






Vider man panier 
Imprinter mom panier 



E 







Total rnarchandise TTC: 121.80 EUR 

Recalculer le total 



Figure 5-123 Sur le site de 
Nicolas, I'intemaute doit cliquer 
sur un bouton Recalculer apres 
avoir modifie une quantite 
dans le panier. S'il oublie 
de le faire, on le previent 
que c'est necessaire. 
Source : www.nicolas.com 
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Assistez votre internaute en tenant compte 
de ses besoins en termes de taches 

Veillez toujours a vous adapter au comportement des gens sur Internet et 
faites un peu d'analyse de l'activite ou de tests utilisateurs sur une inter- 
face existante afin de comprendre leur raisonnement et leurs besoins. 

Prenons 1'exemple d'une interface qui ne prend pas en compte les besoins 
des internautes en termes de taches. Sur le site d'UGC Prompto, on 
peut acheter ses billets de cinema avec une carte bancaire, dont on doit 
saisir le numero afin de proceder au paiement. Le site a prevu une fonc- 
tionnalite d'interface qui peut paraitre interessante au niveau de la securite 
du paiement sur Internet et de la perception subjective qu'en ont les 
internautes : des que Ton a rempli les 4 premiers chiffres de son numero de 
carte et que Ton passe au champ suivant, le systeme transforme ces chiffres 
en etoiles. Au final, tous les chiffres sont representes sous forme d'etoiles. 




Figure 5-124 

Sur le site d'UGC, des que I'intemaute a rempli 
un des champs de son numero de carte 
bancaire, on transforme les chiffres en etoiles. 
Source : www.ugc.fr 
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Anecdote 
Le paiement en ligne n'est pas anodin 

Lorsqu'on effectue un paiement sur Internet, on a 
peur de faire des erreurs. Si vous regardez des 
internautes payer en ligne, vous verrez qu'ils sont 
tres attentifs et verifient plusieurs fois les donnees 
saisies avant de passer a leur validation. 



Ces etoiles sont le symbole conventionnel d'un caractere crypte et aug- 
mentent done le sentiment que le site nous protege efficacement d'un 
quelconque risque lie au paiement en ligne. Cela semble aussi interes- 
sant du point de vue social : si l'internaute commande ses billets au 
bureau, dans un cybercafe ou dans un pare, il ne risque pas qu'une per- 
sonne malveillante puisse voir ses coordonnees bancaires par-dessus son 
epaule. Cependant, en voulant bien faire, on cree une interface qui est 
completement decorrelee des usages des internautes et de leurs besoins 
lorsqu'ils paient en ligne. En effet, elle ne tient absolument pas compte 
d'une donnee essentielle : le comportement des internautes lorsqu'ils 
renseignent leurs coordonnees bancaires. Dans ce type d'activite, les 
internautes ont besoin de verifier que les chiffres qu'ils ont saisis sont 
bien les bons. De plus, en cachant les elements deja entres, on supprime 
tout un contexte qui aide a renseigner la totalite du numero de carte. 



Assistez votre internaute en le suivant de tres pres 

Soyez la des que votre internaute peut avoir besoin de vous et sachez lui 
presenter explicitement les choix qui s'offrent a lui. C'est notamment ce 
qui guide les propositions d'orthographes approchantes dans les resultats 
des moteurs de recherche. On applique egalement ce principe lorsqu'une 
recherche au sein d'un site ne donne aucun resultat et que Ton propose a 
l'internaute des liens vers les differentes rubriques du site, ou encore 
lorsqu'il est confronte a une page non trouvee (erreur 404). 

Aidez votre internaute en lui expliquant tres clairement les choix qui 
s'offrent a lui a un instant t. C'est suivre l'internaute de tres pres que de 
lui demander, lorsqu'il vient d'ajouter un article a son panier, quelque 
chose qui ressemble a : « Que voulez vous faire ? » C'est par exemple tres 
bien fait sur le site de Norauto : 



Figure 5-125 

Le site de Norauto assiste ses internautes en leur proposant explicitement 
deux choix lorsqu'ils viennent d'ajouter un article a leur panier. 

Source : www.norauto.fr 




Fournissez de I'aide explicite en cas de besoin 

Vous pouvez offrir une aide explicite a votre internaute sous deux formes : 
soit vous fournissez I'aide en direct, car vous estimez que l'internaute en 
a forcement besoin, soit vous placez un lien vers I'aide. 
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Les contenus d'aide contextuels, places precisement la ou l'utilisateur en 
a besoin, sont souvent les plus efficaces. Ainsi, la fonction Organiser par lot 
de Flickr, ou une phrase d'incitation permet immediatement aux visiteurs 
de comprendre comment l'utiliser. 



\2i Organiser par lot 
Uririnr In ulivlu* - Autvi 



Votts qal&r»B f IJckf 



Faites glisser des elements ici pour les modifier par lot. 

Vous pourrez ensuite modifier les attributs ou creer un nouvel album. 




* ^ s ■ a i s -3.=.!? 



513EB33 



E 
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Figure 5-126 Flickr assiste ses internautes 
en affichant une phrase qui les guide dans 
la decouverte du mode de fonctionnement 
de I'organisation des photos par lot. 
Source : www.flickr.com 



Gardez toujours a l'esprit que Ton ne doit recourir a l'aide que lorsqu'on 
a tout essaye auparavant. Paradoxalement, la rubrique d'aide sur un site, 
en general, n'est pas d'une grande assistance, car les concepteurs se for- 
cent a prevoir une page de ce type « parce qu'il en faut une ». Erreur 
fatale. 

Si vous n'etes pas capable de rediger des contenus d'aide utiles et utilisa- 
bles (voir chapitre 1), il vaut mieux ne pas en proposer. Sinon, vous laissez 
votre internaute esperer qu'il va pouvoir trouver une reponse a ses ques- 
tions et il sera tres decu d'y avoir passe du temps sans rien pouvoir en 
retirer. 



Regie n° 8. Gestion des erreurs : le site 
prevoit que I'internaute se trompe 

Lors du developpement d'un site web, il est frequent de concentrer tous 
ses efforts sur le processus ideal que Ton souhaiterait voir I'internaute 
derouler. Parfois meme, personne ne semble avoir conscience des conse- 
quences que peut avoir la flexibilite du web : celle-ci est telle que les 
internautes s'echappent tres souvent de ce qu'on avait prevu pour eux. 



175 



VOCABULAIRE 
Erreur, vous avez dit erreur ? 

Les erreurs que nous evoquons ici sont exclusive- 
ment des erreurs explicites, pour lesquelles le sys- 
teme doit repondre a I'internaute par la negative. 
Notez que la definition de I'erreur sur le plan ergo- 
nomique peut etre beaucoup plus large. 
L'erreur peut en effet etre invisible pour I'inter- 
naute, s'il comprend tres rapidement comment la 
corriger ou s'il y a deja ete confronte. C'est par 
exemple le cas lorsque Ton clique a cote d'un 
bouton, ou que Ton choisit la mauvaise rubrique 
dans une barre de navigation. Dans ce genre de 
cas, le systeme n'envoie pas de message d'erreur a 
I'internaute. C'est ce dernier qui va adopter une 
autre strategie, face a I'absence de reponse du site 
ou s'il ne trouve pas ce qu'il cherchait. 



A SAVOIR 

La probability de I'erreur 

depend du type d'interface 

Certaines interfaces sont plus generatrices 
d'erreurs que d'autres. C'est notamment le cas 
lorsque la liberte de renseignement est grande et 
qu'il existe des dependances entre champs. Dans 
tous les cas, I'interface doit etre assez explicite et 
intuitive pour que les internautes ne commettent 
pas d'erreur. 



A SAVOIR 

L'erreur dans un formulaire 

peut prendre plusieurs formes 

Dans un formulaire, les erreurs peuvent etre de 
plusieurs types : I'internaute peut oublier de ren- 
seigner une information, utiliser un mauvais 
format de saisie ou encore saisir des informations 
incoherentes. Les mecanismes de protection contre 
l'erreur doivent envisager tous ces cas de figure. 



La gestion des erreurs est la pour pallier ce type de situation ou I'internaute 
s'ecarte du chemin ideal imagine par le concepteur. Pour optimiser la ges- 
tion des erreurs d'un point de vue ergonomique, il faut d'abord etre cons- 
cient que l'erreur nest pas forcement un cas isole et quelle arrivera sans 
aucun doute. Vous devez alors tout mettre en oeuvre pour proteger votre 
internaute contre l'erreur et l'aider a la surmonter au cas ou elle survient. 

La gestion des erreurs est un sujet critique dans les interfaces transac- 
tionnelles, ou le systeme et I'internaute sont veritablement en interac- 
tion. Globalement, partout ou on trouve des formulaires, on a des 
problematiques de gestion de l'erreur. 

L'internaute ne doit pas faire d'erreur 

La premiere recommandation pour optimiser la gestion des erreurs sur 
votre site est de tout faire pour empecher que vos internautes en com- 
mettent. 

Deux raisons principales expliquent pourquoi vous devez eviter cela a tout 
prix. Tout d'abord, il est evident que l'erreur compromet la realisation de la 
tache de I'internaute. Considerez les erreurs comme autant de points de 
rupture qui risquent de vous faire perdre votre visiteur. En outre, faire une 
erreur n'est pas anodin pour I'internaute, qui cherche alors un coupable. 
Selon la personnalite et le niveau d'expertise de votre internaute, il en 
rejettera la faute sur vous ou sur lui-meme. Aucune de ces deux issues n'est 
souhaitable pour vous. Votre site doit done etre concu de maniere a ce que 
I'internaute soit assez guide pour ne pas faire d'erreur. 

Les interfaces soumises aux problematiques d'erreur sont presque exclu- 
sivement basees sur des formulaires, avec des elements de saisie et de 
selection. II existe differents moyens de protection contre l'erreur, qui 
doivent etre couples. 

La presentation du formulaire peut proteger contre I'erreur 

Eviter les erreurs grace a I'indication des champs obligatoires 

Si votre formulaire comporte des champs obligatoires et d'autres option- 
nels, vous devez l'indiquer a votre internaute grace a une legende. II est 
important que cette legende soit presente, mais aussi quelle soit visible. 
Vous eviterez ainsi que vos visiteurs oublient de renseigner des donnees 
obligatoires. 

On utilise en general a cote du libelle du champ un element colore signi- 
ficant le caractere obligatoire (asterisque, point ou autre element graphique). 
La legende de cet element doit etre placee avant ou apres le formulaire. II 
est plus adapte de la placer avant le formulaire, afin de respecter la logique 
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de lecture de haut en bas. La legende peut etre une phrase du type Les 
informations marquees d'un * doivent etre remplies, Les informations 
marquees d'un * sont obligatoires, * indique un champ obligatoire, etc. 

Eviter les erreurs grace aux libelles et legendes des champs 

Plus le libelle de votre champ sera clair et precis sur le type d'informa- 
tions que vous attendez de la part de votre internaute, moins vous ris- 
quez d'observer d'erreur. 

Si vous eprouvez des difficultes a transmettre toutes les informations que 
vous souhaitez dans le format necessairement reduit d'un libelle de champ, 
n'hesitez pas a lui ajouter une legende (elle peut alors etre affichee sur la 
droite, en-dessous ou a l'interieur du champ). 

Cependant, la legende ne doit etre utilisee qu'en dernier recours, quand 
le reste de l'interface est deja optimise en termes de protection contre les 
erreurs. Votre legende peut accompagner un libelle en fournissant des 
regies pour la saisie, par exemple sur le format attendu pour une date, le 
nombre minimal de caracteres d'un mot de passe, etc. 



Asavoir 

Indication des champs obligatoires 

et rapidite de la prise en main 

du formulaire 

L'indication des champs obligatoires permet aussi 
d'optimiser la prise en main et la lisibilite d'un for- 
mulaire, en facilitant la detection rapide de ce qui 
est necessaire et de ce qui ne Test pas. 



Asavoir 
Un exemple de saisie est une legende 

Nous considerons les exemples de formats de don- 
nees comme des legendes permettant aux utilisa- 
teurs de comprendre ce que Ton attend d'eux. 
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Adresse e-mail 
(doit deja exister) 



Entrez un mot de passe 



Niveau de securite du mot de passe : 



Confirmez le mot de passe 



Norn d'affichage 



Verification des mots 



dtw 



Vous utiliserez cette adresse 
pour vous connecter a Bloggeret 
auxautres services Google. Nous 
ne la communiquerons a aucun 
tiers sans votre autorisation. 



Doit comporter au moins six 
caracteres. 



Norn utilise pour signer Les 
messages de votre blog. 



Saisissez Les caracteres que vous 
voyez sur La photo de gauche. 



Conditions d' utilisation 



I I J'accepte les Conditions d' utilisation 



Endiquez que vous avez Lu et 
compris Les conditions 
d*utiLisation de BLogger. 



0> 



Figure 5-127 

Sur le site de Blogger, les legendes adossees 
aux champs permettent a I'internaute de 
mieux comprendre le type de donnees qu'on 
lui demande de renseigner. Ainsi, elles redui- 
sent le risque d'erreur. 
Source : www.blogger.com 



Notez que la legende peut etre affichee uniquement au moment appro- 
prie afin de ne pas augmenter la charge informationnelle lors de la prise 
en main du formulaire. Grace a ce precede, on decoupe la charge infor- 
mationnelle en ne fournissant l'information qu'au moment exact ou 
I'internaute en a besoin, c'est-a-dire lorsqu'il place son curseur dans le 
champ de saisie. 
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Figure 5-128 

Sur le site de Yahoo!, les legendes 

sont affichees contextuellement, en fonction 

du champ dans lequel I'internaute 

place son curseur. 

Source : www.yahoo.fr 
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pAS.se fit/nil rte vntre irlenitiFiAnt, nous 






Question secrete - ChrjiBiRSR? - 


izJ| 
I 




Votre repnnse j 




vuus reruns puivenii un intsKsaye 
rt arte a nftttft Ariri»sse mnl 


3. 


Si vous oubliez voire compte Yahoo! ou voire mot de passe... 

Adresse alternative 


I 










Question secrete j - Choisissez - 


y 




Votre reponse I 

UHIi&ez ati mc-ins quatre caraaeres lie systeme iw 
mmp!g das mnj utajtati'minuiajloaj. 


i 


i 


ctiDtstssez une r^ponse racie a retenr 
pour i ou3 el difficile a deviner pour les 
sutres nersDnnes! 



Eviter les erreurs grace a la taille des champs 

La taille des champs est un autre indice qui peut inciter les internautes a 
comprendre le type de donnees attendu et permet done de reduire le 
nombre d'erreurs. Par exemple, si vous demandez a I'internaute de saisir 
un departement dans un champ pouvant abriter deux caracteres, il com- 
prendra intuitivement que vous lui demandez le numero du departement 
et pas son nom. 



Figure 5-129 

La taille des champs permet de suggerer le 
type de donnees que Ton attend. 



Votre departement 



Votre departement 



□ 



Eviter les erreurs en utilisant les elements de formulaire a bon escient 

Veillez a utiliser les elements de formulaire (ligne, champ texte, bouton 
radio, case a cocher, liste deroulante, liste, double liste...) de maniere 
appropriee, afm de ne pas induire vos internautes en erreur. 

Par exemple, sur le site de Clarins, les internautes qui commandent un 
article peuvent choisir un produit en dose d'essai parmi 4 proposes ; 
celui-ci sera ajoute gratuitement a leur commande. Or l'interface de 
selection de cette dose d'essai se presente sous forme de cases a cocher 
plutot que de boutons radios (figure 5-130). 

On observe ainsi deux defauts : d'une part, on propose une interface de 
multi-selection et, d'autre part, on laisse les internautes faire des choix 
multiples (les cases a cocher sont bien utilisees en tant que cases a cocher 
et n'adoptent pas le comportement de boutons radios, comme e'est par- 
fois le cas). II est done evident que les internautes vont se tromper. 

Attention : dans ce cas, la legende Exclusive/went pour vous, choisissez 
vos produit(s) en dose d'essai : choisissez en 1 est quasi-inutile. Rappelez- 
vous que les internautes ne lisent pas forcement ce que vous avez prevu. 
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Quantite Article Prix unitaire Prix total fjf[[ 










L | II Baume Hvdi-atant 'Tonic ' 34 f 2L€ 34,2.1 € Suppr 

Contenance: 200 ml 
3KU: 00551100 




/|\ Vous avez selectionnetrop d echantillons. Merci de choisir le bon nombre d articles 




1; « 1 






Sous-total TTC (hors frais de livraisonj 34,21 £ 





N'oubliez pas vos produits complementaires offerts 

Exclusive merit pourvous, choisissez vos produrt(s) en dose d'essai: choisissez en 1 



n b 

Serum Super Lift Defatigant Eclair 

Contour des Yeux Contour des Yeux 
M u Iti - R e g e n e ra nt 



121 m 

Masque Purifiant Eclat Lotion Toniqu 
Camomille 



nl 



nl 



5 ml 



10 ml 



Continuer vos achats 



E 



I 

IT) 



Figure 5-130 

Sur le site de Clarins, un element de multi-selection 
est propose alors que I'internaute n'a le droit de choisir 
qu'une dose d'essai. II est done probable qu'il se trompe 
et voie s'afficher ce message d'erreur. 
Source : www.clarins.fr 



Dans ce type d'interface, qui leur semble correspondre a quelque chose 
de connu, ils vont se jeter sur les cases a cocher sans prendre la peine de 
lire la legende. Et ils commettront done une erreur, qu'il leur faudra 
comprendre puis reparer. Que d'etapes inutiles pour simplement choisir 
un produit en dose d'essai ! 

Eviter les erreurs par I'affordance generate de I'interface 

Enfin, le format general de I'interface peut preter a confusion et amener 
votre internaute a se tromper. 

L'exemple le plus criant de ce type d'erreur est pourtant tees frequent : il 
consiste a proposer un bouton annuler, effacer ou reset en fin de formu- 
laire. Ce type de bouton est tees dangereux puisque vos internautes risquent 
de perdre en un clic des donnees qu'ils ont patiemment renseignees. 
Ce defaut est d'autant plus grave si le bouton dangereux : 

• est situe sur la droite de l'ecran (comme s'il constituait la suite 
logique de Taction) ; 

• se trouve pres du bouton de validation ; 

• possede un format comparable au bouton de validation ; 

• a le format d'un bouton non dangereux (vert, bleu, souriant) ; 

• est situe en bas de formulaire ; 

• permet d'effacer un nombre important de donnees ; 

• ne propose pas de message de confirmation suite au clic. 
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Si vous etes oblige d'employer un tel bouton, essayez done de faire tout 
l'inverse ! Presentez le de la maniere suivante : 

• plutot sur la gauche de l'ecran ; 

• loin du bouton de validation ; 

• dans un format different et moins fort que le bouton de validation 
(par exemple : plus petit, un lien hypertexte plutot qu'un bouton, 
moins fonce, etc.) ; 

• dans un format non anodin (et eventuellement qui alerte sur le carac- 
tere dangereux si Ton risque d'effacer beaucoup d'informations) ; 

• plutot en debut de formulaire (surtout si le bouton sert essentielle- 
ment a revenir a l'etape precedente) ; 

• associe a un message de confirmation si Ton risque d'effacer beau- 
coup de donnees ou des informations difficiles a saisir. 

Bref, faites vraiment attention a ce que votre internaute ne puisse pas 
cliquer sur ce type de bouton en se trompant et ce d'autant plus qu'il 
aura pris du temps a remplir le formulaire. Regardez ces exemples sur le 
site de la Francaise des Jeux et celui de Laforet Immobilier : 



_j Combienavez-vous gagne 7 Vous etes ebon ne : oui C\ nor 



Figure 5-131 

Sur cette page du site du Loto, I'internaute 

peut renseigner toute sa grille afin de savoir 

combien il a gagne. Lorsqu'il a termine, s'il se 

trompe de bouton, un simple die sur Effacer 

supprime I'ensemble des donnees saisies, sans 

le moindre etat d'ame. II ne lui reste alors plus 

qu'a recommencer. 

Source : www.loto.fr 
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Grille 2: 
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VOU5AVEZUN BIEN A LOUER ? 
U^FORETIMMOBILIERVOUSSIMPLIFIELAVIE 

N'hesitez pas a remplir le formulaire ci-dessous 
votre bien 'Votre proposition sera acheminee a 
reception, elle prendra contact avecvous. 

Type de bien 1 : 

Nb de pieces" : 

Lover* : 

Charges 1 : 

Surface habitable 1 : 

Surface terrain (* si le bien est un terrain) 

Adresse du bien 1 : 

CP*: 

Ville du bien 1 : 

VOS COORDONNEES 
Civil ite* : 
Nom* : 
Pre nom* : 
Email* : 
Adresse" : 
Adresse (suite) : 
CP*: 
Ville' : 
Tel. domicile" : 

* champ obligatoire 


indiquez 
Agence 


vos coordonnees et la description de 
.aforet Immobilier la plus proche. Des 


| Appartement 1 ■*■ 1 


V 1 


|a» 


1- 1 


1- 1 


1 1 


|1S rue des lilas 


[75001 


paris 


Q M. o Mme Q Mile 


[duval 


|marte 


d uva I m a ri e@h otmai I .f r 


|l8 rue des lilas 


jfondde lacour 


[75001 


paris 


0145S5744S 


■1 a ■ m-Ji M m.'mr,rrm 



E 



I 
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Figure 5-132 

Sur le site de Laforet Immobilier, I'internaute doit renseigner 
les informations sur le bien a louer et ses coordonnees. Lorsqu'il 
a termine, s'il se trompe de bouton, un simple die sur Effacer 
supprime I'ensemble des donnees saisies. 
Source : www.laforet.com 



Le fonctionnement du formulaire peut proteger contre I'erreur 

Eviter les erreurs en demandant une confirmation 
pour les actions risquees 

Une des protections possibles contre les erreurs consiste a demander a 
vos internautes une double action lors d'une action irreversible ou cri- 
tique (par exemple : suppression, effacement des donnees d'un formu- 
laire, modification de coordonnees bancaires, etc.). 

Eviter les erreurs en empechant la saisie de donnees erronees 

Vous pouvez proteger vos utilisateurs contre les erreurs en n'acceptant 
que la saisie de donnees correctes et coherentes. Si l'utilisateur ne peut 
pas faire d'erreur de par le fonctionnement de l'interface, vous pouvez 
etre rassure. Voyez ainsi comme les sites de DirectVin et de Nicolas 
gerent cette problematique de maniere differente. 

Sur le premier, la selection du nombre de bouteilles via une liste derou- 
lante a un double avantage : elle est auto-explicite (l'interface de selec- 
tion permet de comprendre que Ton peut commander uniquement par 
un nombre defini de bouteilles) et protege efficacement l'utilisateur 
contre les erreurs (puisque ce dernier ne peut effectivement selectionner 



Recommandation 

Soumettre le resultat 

a I'approbation de I'internaute 

II est possible de renseigner certaines informations 
a la place de I'internaute a partir des donnees par 
defaut dont vous disposez dans votre base. Ce type 
de procede lui facilite la tache. Cependant, il est pri- 
mordial de soumettre ce resultat automatique a 
I'approbation implicite de votre internaute. Prenons 
I'exemple des coordonnees de livraison sur un site 
d'e-commerce : a un moment ou a un autre, avant 
de payer sa commande, il doit avoir vu I'adresse de 
livraison que vous lui avez renseignee par defaut a 
partir de ses precedentes commandes. 
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que ce qu'on lui propose). A l'inverse, sur le site de Nicolas, l'internaute 
doit tout faire tout seul : d'abord comprendre (via une icone) que Ton ne 
peut que commander par lot de 6 bouteilles et ensuite ne pas se tromper 
(alors qu'on le laisse saisir dans le champ n'importe quelle valeur) : 



Figure 5-133 

Sur le site de DirectVin, le choix 

d'une liste deroulante permet d'empecher 

la saisie de donnees erronees. 

Source : www.directvin.com 




313 produit(s) correspond(ent) a votre recherche : 



Volnay - Domaine Rossi gnol-C orn u - Rouge - Prix HT 9.20 
1998- 75 cl Prix TTC 11.00 

Prod u it d ispon i ble 



» En savoir + « 



mm 


Volnay - Domains Rossi gnol -Corn u - F 
2CXH) - 75 cl 




» En savoir * « 







Pommard 1er Cru "Epenots" - Dorm 
Dubreuil-Fontaine - Rouge - 2004 



Prix HT 8.53 

Prix TTC 10.20 

Prod u it d ispon i ble 



Prix HT 22.99 

Prix TTC 27.50 

Prod u it d ispon i ble 



» En savoir + « 



r°j3 



Figure 5-134 

Sur le site de Nicolas, le choix d'un champ 

de saisie laisse la porte ouverte au 

renseignement de donnees erronees. 

Source : www.nicolas.com 



Nam du produit 




App-allation 


MiHicinn 


Qwix 






■ Aum-edu ruie - Sdiuu Plii 


uvv -t P ulliai.liiltl 


■«'■""- 


20OO 


10.10 EUR I'uniLe 


ce: 


& 


I Alter Eao de Palmer 




Margjaux 


2004 


49.M EUR 1" unite 


en 


Q 


1 Baron de Lestac 




Bordeaux 


20Q3 


1.70 EUR 1' unite 


m 


a 


a Baron de Lestac 




bordeaux 


2009 


4.oUtUK 1" unite 


i <• i 


rtj 


1 fcj re -■ de Lestac 




bordeaux 


2009 


4.00 t UK I'unite 


[~n 


& 


1 Bordeaux Kouqe A.u.c 




bordea ux 


2UU3 


jMUtUK I'unite 


1=1 


r.". Jf 


I Bordeaux Rouge A.O.C 




bordeaux 


2006 


1.70 EUR I'unite 


CO 


Si 


1 Carraades z~ Lalite 




?auiifac 


2033 


99.00 EUR I'unite 


CO 


£> 


ft HarniftHe-; rfp 1 af\tf 




Pauillac 


20O4 


9S-.C-0 EUR I'unite 


QD 


a 


ft nharme He Cm-; 1 arrnrv 




Sa int-Estephe 


1:0- 


18.40 EUR I'unite 


on 


a 



l-2-J-4-i-b-/-ti-V- lit - 



Nombre dc produjbs par page i ID par page | T | 



Eviter les erreurs en validant ou en corrigeant a la volee 

Le systeme peut indiquer en temps reel si l'internaute est en passe de 
faire une erreur. C'est par exemple le cas sur cette page d'inscription du 
site Hotmail. 
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Choisissez votre mot de passe 

*Tapez le mot de passe 

Niveau de securite 
*Retapez le mot de passe 


3 Ls nouveau mot de passe et le mot de passe 
de confirmation ne correspondent pas. Tapez 
le meme mot de passe dans les deux zones. 


1**"""" 


Six caracteres minimum. Les majuscules et 
les minuscules sort difFerenciees. 






1********* 





Figure 5-135 

Sur le site d'Hotmail, si I'internaute ne saisit pas le meme mot de 
passe dans le second champ, le systeme Ten avertit des qu'il sort 
du champ de saisie. Autrement dit, il n'a pas besoin de cliquer sur 
un bouton Valider puis d'attendre le rechargement de la page 
pour s'apercevoir de son erreur. 
Source : www.hotmail.fr 



Attention cependant a ne pas surproteger vos internautes ou vous ris- 
quez de les contrarier. La correction des erreurs pendant la saisie est, par 
exemple, un precede tres risque. Ainsi, sur le site de Kingjouet, pendant 
que je saisis mon adresse e-mail, on m'indique quelle est invalide : 



i 
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Si vous n'etes pas inscris, creezvotre compte en remplis 
Les champs marques {f'une*sont obligatoires 

Crvilite*: O M. ® Mme. O Mile 


sant le formulaire 


ci dessous 


Norn' : 


dumas 


Q 














Prenom* i 


aurelie 


& 














E-mail" : 


dumas@:hD 


O 




ftdresse e-mail invalide 










Mot de passe ": 


















Confirmezvotre mot de passe x : 


















B 


^m 










Figure 5-136 

Sur le site de KingJouet, la correction a la volee est poussee 
au point qu'on ne laisse pas a I'internaute le temps 
de renseigner son adresse complete. 
Source : www.kingjouet.fr 



Ce type de fonctionnement perturbe fortement les internautes, qui ne 
comprennent pas ou ils ont fait une erreur. Or l'erreur provient seule- 
ment du fait que la saisie n'est pas encore achevee. Si vous appliquez 
ce precede, vous risquez de perdre les internautes qui ne voient pas ou 
ils ont pu commettre une erreur, tout comme vous risquez de forte- 
ment enerver ceux qui continueraient, malgre tout, a saisir leur adresse 
e-mail. 

Le systeme peut faire plus que reperer une erreur pendant la saisie. II 
peut la reperer et corriger en temps reel des donnees qui lui paraissent 
fausses ou incoherentes. Vous devez veiller a n'utiliser cette technique 
que dans des cas extremes ou l'erreur est evidente et ne peut que faire 
perdre du temps a I'internaute. 
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Par exemple, sur le site d'Air France, si vous renseignez une date de 
retour inferieure a la date de depart, le systeme modifie automatique- 
ment cette date de retour pour la faire correspondre a la date de depart. 
Le systeme n attend done meme pas que l'internaute ait valide le formu- 
laire, l'erreur etant evidente. 



Figure 5-137 

Sur le site d'Air France, si je choisis une date 

de retour au 2 septembre alors que la date 

aller est le 4 septembre, le systeme effectue 

une correction automatique. Ainsi, la date 

retour devient le 2 octobre afin d'etre cohe- 

rente avec la date aller. 

Source : www.airfrance.fr 
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RECOMMANDATION Protections avancees contre les erreurs critiques 

Faites bien la difference entre une erreur classique et 
une erreur dont l'internaute ne se rend compte que 
tardivement, voire jamais. Prenons I'exemple de Ins- 
cription a une newsletter ou de la creation d'un 
compte utilisateur. Ce type d'operation est souvent 
suivi d'une confirmation par e-mail. On ne cree le 
compte ou on n'abonne reellement l'internaute 
que si ce dernier clique sur le lien de confirma- 
tion dans son e-mail. 

Dans ce genre de situations, la saisie d'une 
adresse e-mail erronee peut impacter la suite des 
evenements de maniere critique. 
Trois types de protection avancee peuvent alors 
etre mis en place. D'une part, vous devez valider 
le type de donnees renseigne en evaluant si leur 
semantique et leur syntaxe correspondent a ce 
que vous attendez (caractere texte, chiffre, carac- 
tere special, etc.). Cela permet de detecter une 
erreur non remarquee par I'utilisateur et evite 
d'envoyer des donnees erronees. 
D'autre part, vous pouvez demander a l'inter- 
naute de saisir deux fois son adresse e-mail et/ou 
son mot de passe. Lorsque vous optez pour cette 
solution, essayez d'empecher que l'internaute puisse 
copier/coller le premier champ dans le second (sinon 
cette technique de confirmation devient alors beau- 
coup moins utile et fiable). Vous pouvez vous per- 
mettre de limiter le controle utilisateur dans ce cas 



precis car vous devez absolument disposer de I'adresse 
e-mail valide de votre internaute. 
Enfin, donner une information a votre internaute sur 
ce que vous avez fait peut lui permettre de reperer son 
erreur a posteriori. C'est par exemple le cas avec cet 
ecran de confirmation : 



Votre demande de prise d'option a bien ete enregistree et nous vous en remercions. 
Conseruez la reference de votre demande : 2007-558 AYT 

Vous recevrez dans les psochsms jours par voie postale un bulletin d'inscription papier pre-rempli, que vous 
■ H . -: : : Mr.er ^Tir. . le ■: or.tir ir.et otr e ir. : ■: 1 1| -ti-:.r. 

Pour memoire, voici les informations que vous nous avez fournies: 

Formation Deoouvrir le droit du travail, outil du manager (B0524) 
Paris. 6-7 juin 2007 
Tarit : 960€ HT 

Mile Brunei Marie 

brunelmaarie@aol.oom 

Assistante ressouroes humaines 

RATP 

France 

Telephone : 0-1 45 35 74-12 

Figure 5-138 Sur le site de Lamy Formation, I'ecran de confirmation 

de prise d'option recapitule les informations fournies par l'internaute. 

Source : Specifications ergonomiques pour la refonte du site 

http://lamy.fr/modules/formations 

En voyant ce message, Marie peut se rendre compte 
qu'elle s'est trompee et tenter de corriger cette erreur : 
elle peut, soit ecrire un message au webmaster, soit 
recommencer le processus d'inscription en veillant a 
bien renseigner son adresse e-mail. 



184 



L" inter naute doit facilement reperer et comprendre 
ses erreurs 



Faciliter le reperage de I'erreur 

Pensez a montrer a vos internautes qu'ils ont fait une erreur. Ce conseil 
peut paraitre trivial, mais il s'avere indispensable lorsqu'on regarde ce qui se 
fait sur le Web. Trop souvent, les internautes ne comprennent pas qu'ils ont 
commis une erreur parce que l'interface n'est pas assez explicite. Autrement 
dit, vous devez garantir la visibilite du message signalant le probleme. 

II faut distinguer I'erreur pour la detection de laquelle vous avez besoin 
de recharger la page et celle que vous pouvez gerer sans. Servez-vous au 
maximum de cette seconde possibility afin d'eviter les problemes de visi- 
bility des messages d'erreur. 
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Figure 5-139 

Sur le site d'Estee Lauder, le message d'erreur qui 
s'affiche apres rechargement de la page n'est pas 
visible, car il est situe en dessous du seuil de 
visibilite en resolution 1024 x 768 pixels. 
Source : www.esteelauder.fr 
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Par exemple, sur le site d'Estee Lauder, l'intemaute doit cocher un des 
boutons radio avant de pouvoir ajouter un produit a sa liste coup de cceur. 
S'il clique sur le bouton sans 1' avoir fait, la page se recharge afin d'afficher 
le message d'erreur. Or l'internaute se retrouve du coup tout en haut de la 
page et il n'a pas de visibilite directe sur le message d'erreur. II peut done 
croire que e'est la prise en compte de sa demande qui a provoque le rechar- 
gement et continuer sa visite sans se rendre compte de son erreur. 

Recharger la page n'est pas un signe suffisant pour alerter votre inter- 
naute et ce d'autant moins que ce rechargement est rapide. Lors de tests 
utilisateurs, il est tees frequent de voir des internautes persuades que le 
site « a plante », que « 9a n'a pas marche », qui cliquent a nouveau sur le 
bouton de validation du formulaire sans meme chercher a trouver une 
autre explication. Ce constat est tees important sur le Web : les inter- 
nautes ont l'habitude de voir des sites flexibles (une erreur est en general 
rattrapable) et cliquent souvent plus rapidement qu'on ne l'aurait ima- 
gine. Ainsi, il est courant de les voir cliquer sur un bouton sans etre 
capables de se rappeler le libelle quelques secondes plus tard. 

Fournir une explication precise de I'erreur 

Pour que votre internaute comprenne la teneur de son erreur, vous devez 
lui expliquer precisement de quoi il retourne. Regardez par exemple 
comme le site d'American Express explique bien les oublis et erreurs : 



Figure 5-140 

Messages d'erreur suite a des oublis sur le 

formulaire de demande de carte du site 

d'American Express. 

Source : www.americanexpress.fr 



Type de profession 



Chosissez 



M 



Merci de precise r votre type de profession. 



Nombre de persormes 
a charge ■ 



Nombre de personnes a charge obligatoire. Si vous n'en avez pas, precisezO. 



Adresse e-mail 



Figure 5-141 

Message d'erreur suite a une erreur sur le 

formulaire de demande de carte du site 

d'American Express. 

Source : www.americanexpress.fr 



marie.dupas.hoimail.fr 



= ~ ~:_ rr sssrt v:-t r s an r s==s eletironioue a American Express, vous acceptez de recevoir des offres persornaltsees par e-mail 
vous informant sur nos prod Hits, services et offres negocees pour vols s-cse :s ros partenaires. Vous pouvez a tout moment 
nous demander de ne plies recevoir de communication par e-mail dans Is rubrique Confkaentislrre / F r ctsct:- n :ss ::"=== 
-:~ "=r,SE -= -:l's = ts. 

Merci de verifier le format de votre adresse e-mail {exemple: nom@domaine.fr) avec 30 
caracteres aj maximum, 



Prenons un exemple moins bien reussi sur le site de KLM : si l'inter- 
naute oublie de renseigner le champ destination, on lui indique que A 
doit comporter au moins 2 caracteres (figure 5-142). 
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A doit comporterau rrajins2 caracteres. 



Planifiez et reservez votre vol 

O Vol aller-retooir ► AMer simple > Destinations multiples 



De 



Palis (PAR) 



> Chercher destination 



Depart 



B ^H 



HI 



Retour 



H 



HI 



Est-ce que vous etes flexible? 

Q Jedois voyager a ces 

dates-fi 
o Jesuis flexible : donnez 

(Tautres dates [+/- 7 jours) 



Cabine 



Aide 



Economy 



> 5-14 ans? 



r^l Adulte[s) 

-*=" [* 12 ans) 



ro^ O Enfant! s) 

— [de 2 a 1 1 ans) 



U, [7|Bebe(s> 
— [- de 2 ans) 



E 



Figure 5-142 

Message d'erreur suite a un oubli 
sur le formulaire de reservation 
du site de KLM. 
Source : www.klm.fr 



i 
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Ce message est exact, d'un point de vue technique. Mais, si Ton se place 
du point de vue de l'internaute et de ce qu'il vient faire sur l'interface de 
reservation, on peut raisonnablement penser que ce champ vide est 
synonyme d'un oubli. Or, dans ce message d'erreur, on ne mentionne 
pas le mot « Destination ». II est done plus difficile pour l'internaute de 
comprendre quel type d'information il a oublie de renseigner. 

Pour que vos messages d'erreur soient les plus precis possible, debrouillez- 
vous techniquement pour distinguer les types d'erreurs et leur affecter 
un message different. Dans l'exemple suivant, sur un formulaire de 
demande de carte American Express, l'internaute s'est trompe sur le 
format de sa date de naissance en tapant 1994 au lieu de 1984. Or le 
message d'erreur offre deux pistes d'explication : soit la date n'est pas au 
bon format, soit l'internaute a specine qu'il etait mineur. Pour com- 
prendre cette dichotomie, on exige de l'internaute qu'il analyse le mes- 
sage plus en profondeur que si Ton avait distingue en amont les deux 
types d'erreur. Dans les illustrations suivantes, vous voyez comment la 
restriction du message a sa seconde partie permet de comprendre bien 
plus vite le probleme : le site pense que Ton a moins de 18 ans, ce qui 
aide l'internaute a realiser qu'il s'est trompe de chiffre. 



Date de naissance 



M01 



/1J94 



Merci de verifier que votre date de naissance ne comprend que des chiffres dans le bon format, 
Vous devezetre age(e) de 1B ans ou plus, 



Date de naissance 



22 M01 / 1994 



Vous devezetre age(e) de 1B ans ou plus, 



Figure 5-143 

On pourrait ameliorer le message d'erreur du 

site d'American Express (premiere illustration) 

en detectant le fait que I'erreur vient du fait 

que l'internaute a specifie etre mineur, et non 

du format de la date renseignee (deuxieme 

illustration). 

Source : www.americanexpress.fr 
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Faire preuve de courtoisie dans les messages d'erreur 

Les messages d'erreur ne doivent pas remettre en cause l'utilisateur. 
Vous devez eviter que ce dernier se sente stupide ou blesse. Nous 
sommes ici entre nous et pouvons done parler d'erreur, mais ce n'est pas 
toujours le terme le plus adapte pour attirer l'attention de votre inter- 
naute sur le probleme. Ce mot est en effet tees fort et risque de le placer 
dans une situation desagreable. 

Pensez done a rester courtois. Vous pouvez meme traiter l'erreur avec 
legerete lorsqu'il s'agit d'oublis. Les sites de Cdiscount et d'American 
Express le font tees bien et tees simplement. 



Figure 5-144 

Message d'erreur suite a un 
oubli sur le site de Cdiscount. 
Source : www.cdiscount.com 



Civil its* 

Norn * 
Prenom* 

ADRESSE 



Selectionnez 



duoas 



Appartement 

Bati merit 

N" etnom delarue 1 

EP 

CP* 

Ville* 



Ex : Seme etage qu EscaiierA ou Appartefnent513 



Ex : titfnsubts des Forsyihias ou Batrntent 5 ou Residence des Foisytnia3 



|i2 rue d&s lilas 

Ex : 35B ou 35BB chemm /rue /avenue /attee / impasse /boulevard... des Forsytfrrss 



|75010 



loans 
Ex : Bon 






Cette ad resse est votre ad resi 

D Je souhaite etre livre a Lne 

COHPTE 



Mon email* 
Confirmer votre email' 



La page sur http://www.cdiscrount.com dit : 

/t\ N'oubliez pas d'indiquer la civilite 
LlJi 



OK 



e votre compte client, 
rmettre de recevoir le su 



>e 



complet de votre commande : confirmation de paiement, 



Figure 5-145 

Message d'erreur suite a un oubli 

sur le formulaire de demande de carte 

du site d'American Express. 

Source : www.americanexpress.fr 



Statutresidentiel " O locata ire O prop rieta ire O autre 

Merci de preciser votre statut residential. 



Le contenu de votre message n'est pas la seule maniere d'etre poli et 
courtois. Le format dans lequel vous presentez vos messages peut aussi 
vous aider a etre aimable ou, a l'inverse, vous faire passer pour un 
malotru. Ainsi, la presentation d'un oubli sous forme de fenetre d'alerte 
Javascript est fortement deconseillee. 
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L" inter naute doit facilement pouvoir corriger ses erreurs 

Pour faciliter la correction des erreurs, le contenu du message doit 
donner des pistes de resolution a l'internaute. Autrement dit, il ne suffit 
pas de lui indiquer qu'il s'est trompe et de lui expliquer le probleme. II 
faut aussi l'aider a aller au-dela de cette erreur. 

Faciliter la correction grace a I'explication de I'erreur 

En general, si vos messages d'erreurs sont suffisamment explicites (cf. 
notre point precedent), cette explication joue implicitement le role 
d'aide a la correction : c'est en comprenant son erreur que Ton peut la 
corriger. Regardez cet exemple sur le site d'American Express : 



E 



I 

IT) 



Telephone (Domicile) 



Telephone obligatoire en chiffres uniquement (format correct : 10chiffres sans espace). 



Figure 5-146 

Message d'erreur suite a une erreur dans le format du numero 
de telephone sur le site d'American Express. L'explication de 
I'erreur fournit la piste de resolution. 
Source : www.americanexpress.fr 



Dans le cas de champs requis que Ton a oublie de renseigner, cette aide 
est deja contenue dans l'explication du message : en indiquant qu'un 
champ est obligatoire, vous avec deja tout dit. 

Attention, l'affichage du formulaire avec le message d'erreur doit fournir 
davantage d'aide que le formulaire vierge. Par exemple, toujours sur le site 
d'American Express, si je me trompe de format de date de naissance, on 
m'en informe en me demandant de corriger : Merci de verifier que voire 
date de naissance ne comprend que des chiffres dans le bon format. 
Cependant, il m'est impossible de faire cette verification. En effet, je ne 
dispose plus du format reference qui etait contenu par defaut dans les 
champs : je les ai remplis avec mes donnees (ce qui est necessaire). Saisir 
une date apres avoir fait une erreur est done plus complique que dans 
l'interface de base. 



Recommandation 

Les 4 dimensions 

du message d'erreur 



Les messages d'erreur doivent etre ecrits en Ian- 
gage naturel, rester respectueux, indiquer precise- 
ment le probleme et suggerer une solution pour 
corriger I'erreur. 



Date de naissance 



Figure 5-147 

Sur le site d'American Express, lorsque je n'ai pas encore saisi de date, je dispose 
d'un format de reference qui m'aide pour renseigner ma date de naissance. 
Source : www.americanexpress.fr 



Date de naissance 



P.lerci de verifier que votre date de naissance ne comprend que des chiffres dans le bon format. 
Vous devez etre age(e) de 13 ans ou plus. 



Figure 5-148 

Sur le site d'American Express, lorsque j'ai fait une erreur dans 
le format de ma date de naissance, je ne dispose plus du format 
de reference pour m'aider a effectuer la correction. 
Source : www.americanexpress.fr 
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Vocabulaire Nominal ? 



En ergonomie web, on dit que I'etat nominal d'un 
objet est son etat de base, normal, sans que per- 
sonne ne I'ait touche. 



Pour gommer ce defaut, vous devez penser a ajouter au message d'erreur 
une repetition du format attendu, sous forme de legende a cote du champ. 

Vous n'avez pas forcement besoin de modifier l'interface nominale pour 
quelle integre cette legende. En effet, presenter ce format directement 
dans les champs est plus utile (les internautes s'en apercoivent davantage 
que s'il etait a cote du champ et done l'utilisent plus) et plus utilisable (il 
facilite ainsi la saisie progressive des donnees sur le meme format). 



Faciliter la correction grace aux mecanismes de gestion 
des erreurs 

Trois dimensions fonctionnelles sont importantes pour faciliter la correc- 
tion des erreurs. Tout d'abord, traitez l'ensemble des erreurs en une seule 
fois. Presenter une seule erreur a la fois peut sembler faciliter la tache de 
l'internaute (puisque cela lui permet de se concentrer sur l'erreur en ques- 
tion), mais ce type de precede est tees couteux en termes d'implication uti- 
lisateur. Vous devez eviter a tout prix que l'internaute corrige une erreur et 
revalide le formulaire, pour se voir annoncer qu'il y a toujours un pro- 
bleme. Cela ne fait qu'augmenter les inconvenients de l'erreur. 

De plus, preferez l'affichage des messages d'erreur directement dans la 
page. L'affichage dans des pop-up empeche l'internaute de disposer 
immediatement du contexte qui doit l'aider a comprendre et a corriger 
plus facilement l'erreur. 

Enfin, si l'internaute a fait une erreur, veillez a laisser les champs remplis 
afin qu'il puisse la comprendre plus facilement (en visualisant sa premiere 
saisie, il voit ce qui ne va pas) et la corriger plus facilement (puisqu'il dispose 
du contenu de sa premiere saisie). 



Regie n° 9. Rapidite : l'internaute 
ne perd pas son temps 



Dans ce livre 
La loi de Fitts ? 



Au chapitre 3, nous avons aborde en detail la loi de 
Fitts et ce qu'elle nous apprend en termes d'utilisa- 
bilite des elements cliquables. Dans son expression 
de base, elle enonce qu'une cible est d'autant plus 
rapide a atteindre qu'elle est proche et grande. 



Optimiser la navigation 



Faciliter Taction de visee des elements cliquables 

Tout d'abord, pour etre rapides, vos internautes doivent pouvoir cliquer 
facilement et rapidement sur les elements cliquables. Souvenez-vous de la 
loi de Fitts et de toutes ses implications sur la conception des elements 
cliquables ! 
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Prendre en compte les besoins de votre internaute sur le plan 
fonctionnel 

Debrouillez-vous aussi pour faciliter la tache de votre internaute, meme au 
niveau fonctionnel. Ce principe est tres important pour limiter les verifi- 
cations pre-clic. Avant de cliquer sur un bouton engageant, les internautes 
controlent en general une derniere fois s'ils ne se trompent pas. 

Par exemple, si un internaute achete un produit a partir d'une liste, il va 
cliquer sur un bouton ajouter au panier correspondant a un produit. Si 
ces deux elements sont eloignes visuellement, vous pouvez faciliter leur 
mise en relation mentale en attribuant une couleur de fond a toute la 
ligne au survol de la souris. 



E 



I 

IT) 
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Figure 5-149 

La mise en relation mentale du lien Ajouter 
au panier et du disque concerne est plus 
facile dans la seconde illustration que dans 
la premiere, issue du site de la Fnac. 
Source : www.fnac.com 
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De plus, evitez de jouer avec la navigation. Si cette derniere doit prendre 
un aspect ludique, ce ne peut etre qu'en respectant quelques regies de 
base. II est particulierement deconseille d'afficher les titres des rubriques 
uniquement au survol, comme par exemple sur le site de l'editeur Didier 
Jeunesse. En effet, cela oblige l'internaute a accomplir des allers-retours 
physiques (par deplacements successifs de sa souris sur chacun des items) et 
a memoriser chacun des items en plus des actions de comparaison mentale. 

Sachez aussi prevoir de quoi pourrait avoir besoin votre internaute, et 
essayez de lui foumir un moyen simple pour y repondre. C'est par exemple 
ce que pratique le site e-commerce de Colette en proposant de maniere 
tees claire, sur chaque fiche produit, un convertisseur de devises, permettant 
de passer en un clin d'ceil de l'euro au dollar, au yen ou a la livre sterling. 



Figure 5-150 Les fiches produit du site 

de Colette offrent un moyen tres simple 

de modifier la devise du prix des articles. 

Source : www.colette.fr 



10,00 €t 
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Multiplier les des d'entree vers une meme page 

Une meme interface peut etre plus ou moins « multi-cliquable » et avoir 
ainsi une influence sur la rapidite d'action de votre internaute. Pour que 
ce dernier puisse accomplir rapidement ses objectifs, il ne doit pas fonc- 
tionner par essai-erreur, mais uniquement par essai-reussite. Si votre 
interface suggere qu'un element est cliquable, ce dernier doit effective- 
ment l'etre et supporter la navigation. Autrement dit, votre internaute 
ne doit pas cliquer sur un element qui n'est pas cliquable et se voir alors 
contraint de changer de strategie pour atteindre son objectif 

Vous devez done faciliter les entrees multiples vers une meme page : que 
l'internaute clique sur un titre, une image ou un lien texte, il sera dirige vers 
la page en question. Voyez par exemple comment, sur le site de Kingjouet 
(figure 5-151), on peut avoir envie de cliquer sur le titre du jeu (alors que 
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seule l'image est cliquable) ; comment, sur le site d'Otto Office (figure 5-152), 
cliquer sur l'image ou le titre peut sembler tres naturel (alors que seul le 
bouton Details est cliquable) ; comment, sur le site du Tournaisis (figure 5-153), 
on peut vouloir cliquer sur l'image (alors que seuls le titre et le bouton en 
savoir + sont cliquables) ; comment, enfin, sur le site du Tourisme en 
Loire-Atlantique (figure 5-154), on peut avoir envie de cliquer sur le titre 
ou sur l'image de 1'actualite (alors que seul le lien Suite est cliquable). 



E 




Le Xylophone de Babar 
LAN SAY 



Figure 5-151 

Sur le site de KingJouet, seule l'image du jeu est cliquable. 
Autrement dit, on ne peut pas cliquer sur le titre 
Le Xylophone de Babar pour acceder a sa fiche detaillee. 
Source : www.kingjouet.fr 
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IT) 



Notre selection du moment 



Papiui Clairalfa 



ClnHiiisu'E a vla&Liqutt sans rabal 



^BS^ 



3,02€ ht 




0,57€ ht 



Figure 5-152 Sur le site d'Otto Office, seul le bouton Details 
est cliquable. Autrement dit, on ne peut pas cliquer sur le titre 
ni sur la photo du produit pour acceder a sa fiche. 
Source : www.otto-office.fr 



Poterie Le Chatelier 

Wodecq [Ellezelles) 

Tel.: +32(0)6Srt4.B7.25 
Tel.: +32[0>474(5Z01 .89 

Michele Vincken pratique Tartde la poterie depuis plus 

de 30 ans et cela fait 1S ans qu'elle a pose ses valises 

a Ellezelles, dans une ravissante fermette nichee dans 

Tecrin des Collines. L'atelier amenagedans la grange 

abrite ainsi les creations de Michele, fervente adeptede la terre cuite. 

iiMiiMuwumiiS 




Figure 5-153 

Sur le site du Tournaisis, seuls le titre Poterie Le Chatelier et le 
bouton en savoir + sont cliquables. Autrement dit, on ne peut pas 
cliquer sur l'image pour acceder a la fiche de l'atelier de poterie. 
Source : www.tournaisis.be 




La Bretagne 
jette I'ancre a 

Pat-is 



I 23 septembre 2007 

Suite [=| 



Figure 5-154 

Sur le site du Tourisme en Loire Atlantique, seul le lien Suite 
est cliquable. Autrement dit, on ne peut pas cliquer sur l'image 
ni sur le titre La Bretagne jette I'ancre a Paris pour acceder 
au detail de I'evenement. 
Source : www.loire-atlantique-tourisme.com 



Sur le site de Natures & Decouvertes, on rencontre le meme type d'erreur 
lorsqu'on souhaite acceder aux rubriques d'un univers. Comme on le voit 
sur 1'illustration 5-155, dans l'univers Vivre au naturel, la seule maniere 
d'acceder a une rubrique interieure consiste a cliquer sur l'image correspon- 
dante. Or, un reflexe tres naturel consiste a cliquer sur le titre Parfums de 
la maison, car c'est bien cet element qui represente la rubrique en question. 
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Figure 5-155 Seul un die 

sur I'image permet d'acceder a la rubrique 

Parfums de la maison, alors que Ton aura 

tendance a cliquer plutot sur le titre. 

Source : www.natureetdecouvertes.com 



Figure 5-156 L'organisation visuelle 

devrait permettre de comprendre que la seule 

action possible sur cette page consiste 

a actionner la liste deroulante Choisissez. 

Source : www.e-leclerc.com 
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Le risque ici est non seulement que l'internaute clique sur plusieurs ele- 
ments avant de trouver le bon, mais aussi qu'il quitte le site en pensant 
que rien ne se trouve derriere cette page. 

On peut ainsi remarquer que lorsque les cles d'entree ne correspondent 
pas aux premiers reflexes des utilisateurs, ces derniers risquent de ne pas 
comprendre ce que Ton attend d'eux. 

C'est le cas sur le site d'E.Leclerc, ou les internautes doivent actionner 
une liste deroulante pour selectionner une sous-rubrique, alors qu'il 
semblerait plus naturel de pouvoir cliquer sur les titres (exemple : Jouet) 
ou sur les images correspondantes (figure 5-156). Si ces possibilites ne 
sont pas proposees, rapprocher la liste deroulante du titre permettrait au 
moins de mieux faire comprendre a l'internaute qu'il est oblige de choisir 
une sous-rubrique parmi l'univers Jouet. 
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Faciliter les interactions 

Dans le meme ordre d'idees, vous devez faciliter les interactions. C'est 
par exemple le cas sur le site de Zadig & Voltaire : cliquer sur une cou- 
leur de vetement affiche la piece correspondante en grand et selectionne 
la couleur en question dans la liste deroulante. 



Zradi^&VuJtairc 
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Prenons un autre exemple d'interaction sur le site de Surcouf (figure 5-159). 
Imaginons que l'internaute ait commence par indiquer son souhait de payer 
en cheques Kadeos ; puis, se rendant compte de la complexity que repre- 
sente cette methode, il opte pour la carte bancaire. II ne peut pas changer de 
moyen de paiement sur cette page et doit revenir en arriere avec le bouton 
Back de son navigateur (ce qu'il peut d'ailleurs considerer comme risque de 
par le type de processus engage : « Est-ce que ca ne va pas effacer ma 
commande? »). 

Le paiement par Kadeos etant particulierement inadapte sur le site de 
Surcouf, il est important de prevoir un moyen rapide et sur pour que 
l'internaute puisse changer de moyen de paiement. En prenant en 
compte cette logique utilisateur qui facilite les interactions, vous reus- 
sirez a creer un site plus utilisable. 

Faciliter les interactions, c'est aussi optimiser l'utilisation des elements 
de formulaires. Par exemple, simplifiez la verification visuelle des don- 
nees saisies dans un champ en prevoyant que celui-ci soit assez long 
pour traiter la plupart des cas. 



Astuce 

Rendez cliquables les libelles 

de cases a cocher et de boutons radio 

Vous pouvez aussi optimiser les interactions en 
prevoyant d'autoriser la selection d'une case a 
cocher ou d'un bouton radio aussi bien par un die 
sur I'element de formulaire (case ou bouton radio) 
que sur le libelle associe a cet element. 
Ainsi, dans I'exemple suivant, que l'internaute clique 
sur le bouton radio ou sur le libelle Voyages a titre 
personnel, cela aura pour consequence de selec- 
tionner I'option correspondante. 



Afin de mieux vous eaiEfsire et d'amelkjrBr noe eervEcss, merct 
d'irvdkjuer le molif principal de voire voyaqeCfaculiatif) : 
Q Voyages a titre oersonnel Q Voyaoes a litre professionnel 



Figure 5-157 

Source : www.voyages-sncf.com 



Figure 5-158 

Sur le site de Zadig & Voltaire, le die 
sur une vignette de couleur prepare I'achat 
du vetement dans cette couleur. 
Source : www.zadig-et-voltaire.com 
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| Voire pa nler 



3 Llwralsem 



5 Conflrmallon 



Figure 5-159 

Sur le site de Surcouf, I'internaute ne peut pas 

changer de moyen de paiement directement a 

partirde cette page. 

Source : www.surcouf.fr 



Recapitulate paiement 

amele beucfief 

PI= client: 66310527 
Pl = Ue uuiiuriaiiUe . 



D-dLe de uunm untie . 22 C 7S2MJ 




Pay" en 2y a pprtrdc — _ . _ 

— ' — 1C ,._ . f Carte Trac ■v 

1 EUR tie* 

> Vcbiis SWS1 ■i:li«isi Ih |i h i hi nt+i i I |»nr i:Iih<|ijh Kndwos 

Veuillgz adre&SQr sous 15 joura votre cheque KadeoE a I'adreBEte euivante : 



SiLraruiT.cnm 

Service Caiaac 

139 avenue Daumesnll 

75012 Paris 



Voub avet eouhaite payer an cheque Ksdeoe. 

fir>L»5 voua recomrnfl nda na dc mews envoyer vutre counricf en Re-commande, 

CVti flTn np sp.n irsp.r au HMKliniim lanhpmlnpmpnr Up vfisra nalp-tmnt 



flTTFHTinn : Nnns alflrans vntrp flitMHlrn sur Ip Tflf qup ra» mnfip tip rpglprrtpm ralftnrlT le process rte TralTpm.pnT rte vnfre mmrnflnrcp 

et pent enlramer dee de&agrernente en matiere de di&ponibMite dee produite : e-l-t les produrts a fcrte relation, un detai 

de recealiiHi ct dc Iraitement de voire courrier de rordre 2 a 3 purs peut a'accDrnpflc ner de lo mature ae atcck ennoince disocfitile 

Inra Dp vatTK prBp rte rnrrannnflp 



Gontinuer et valider ma cornmande 



Figure 5-160 

Dans le premier cas le champ e-mail est trop 
court pour que les utilisateurs puissent verifier 
d'un seul coup d'oeil qu'ils ont bien renseigne 

leur adresse. 



Votre e-mail ' marie ,dupas@hotn 



Votre e-mail * marie.dupas@hotmail.com 



Point devue 
Les attentes des internautes influent 
sur la qualite generale de I'lnternet 

Fort heureusement, les internautes qui adoptent 
volontairement ce type de comportement sont ceux 
qui en ont deja fait I'experience avec succes sur un 
autre site. On peut done esperer qu'a force, cela 
contribue a ameliorer la qualite generale du Web. 



Fournir un champ plus long permet de limiter les actions a accomplir 
avec le clavier et la souris pour verifier la validite des donnees entrees. 
En effet, lorsqu'un champ ligne est trop petit, les utilisateurs ne peuvent 
embrasser du regard l'ensemble des donnees qu'ils ont renseignees. lis 
sont done obliges de se deplacer a l'interieur du champ a la recherche 
d'eventuelles fautes de frappe. 

Dans le meme ordre d'idees, prenons l'exemple de la saisie d'un numero de 
carte bancaire. Prevoyez de passer au champ suivant si I'internaute entre un 
5eme chiffre. Sinon, votre internaute risque de taper avec attention les 12 
chiffres de son numero, les yeux rives sur son clavier, pour s'apercevoir en 
relevant la tete que seuls les 4 premiers ont ete pris en compte. 

Eviter les actions inutiles 

Une des principales regies d'une interface ergonomique consiste a simpli- 
fier la vie de ses utilisateurs. Pour y arriver, vous ne devez pas contraindre 
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les internautes a des actions que vous pourriez leur eviter. Les ordina- 
teurs sont tees puissants et peuvent s'adapter a de nombreuses situations, 
sous reserve qu'on se donne la peine de leur en donner l'ordre. Ne 
demandez pas a vos internautes un effort qui pourrait etre pris en charge 
par la machine ! 

Traquez done tout clic inutile qui viendrait compliquer la tache de 
l'internaute. Vous devez reperer tous les moments ou vous demandez a 
votre internaute quelque chose de superflu pour la situation dans 
laquelle il se trouve. 

Prenons un exemple sur le site UGC Prompto, qui permet de reserver 
des places de cinema en ligne. Lorsque l'internaute arrive au moment de 
regler avec sa carte UGC illimite, on lui demande de saisir deux 
informations : le numero de sa carte et le nombre de places qu'il souhaite 
reserver avec. Or il ne peut en reserver qu'une. On l'oblige done a 
actionner une liste deroulante pour selectionner la seule option 
disponible : 2 clics inutiles. 



Point devue 
Anti 3 clics, mais pas anti-rapidite ! 

Si nous sommes tout a fait contre la regie des 3 
clics comme plafond pour architecturer I'informa- 
tion (voir a ce propos le chapitre 2), elle a un 
avantage : elle souligne que, plus on clique, plus 
notre objectif est difficile ou long a atteindre. 
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- Liste des modes de paiement 




Figure 5-161 

Lorsque je souhaite reserver deux places avec 
des cartes UGC illimite sur le site d'UGC, je 
dois utiliser les listes deroulantes pour choisir 
/ en tant que nombre de places. 
Source : www.ugc.fr 



Ce defaut est encore pire du fait que l'option proposee par defaut est : 
il parait en effet evident qu'ayant renseigne un numero de carte, l'inter- 
naute veuille regler au moins 1 place avec ce numero. 

Ne pas demander a l'internaute deux fois la meme chose 

Si votre internaute a deja saisi des informations, veillez a ne pas les lui 
demander a nouveau par la suite. Par exemple, sur le site de Promod, les 
coordonnees de facturation sont pre-remplies avec l'adresse e-mail que 
l'internaute a saisie a l'etape precedente (figure 5-162). 

La plupart des sites web appliquent aujourd'hui cette regie sur le par- 
cours le plus frequent des internautes, mais l'oublient souvent lorsque les 
actions des visiteurs devient du chemin classique. Voyez ainsi comme le 
site d'UGC Prompto efface des informations precedemment rensei- 
gnees par l'internaute lorsque ce dernier ajoute une carte de paiement a 
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Figure 5-162 

Sur cette page du site de Promod, Marie 

n'a pas besoin de renseigner son adresse 

e-mail car elle I'a deja specifiee lors de 

I'etape precedents. 

Source : www.promod.fr 



sa commande. Dans cet exemple, l'internaute avait renseigne deux 
numeros de cartes UGC illimite mais l'ajout d'une troisieme efface les 
donnees precedemment saisies. 



1) Adresse de fa ctu ration 


O Mademoiselle © Madame 
Hon** 
Prenom* 

Adresse- 1 - 

pour faciliterla livraison pensez 
a melftre code, bailment 
telephone 

Code Postal* 

Ville* 

Pays* 

E mail 

Telephone 

Dale de liaissanue 


O Monsieur 


1 1 




1 1 




1 1 


1 1 




1 1 




1 1 


1 1 




| Choisissez voire pays [vj| 


rriari9@dupss.com 




1 




|r| |r| |u»rmfaaaa 



Figure 5-163 

Etat de I'interface avant l'ajout d'une troi- 
sieme carte illimitee sur le site d'UGC. 
Source : www.ugc.fr 



Figure 5-164 

Etat de I'interface apres l'ajout d'une troisieme 

carte illimitee sur le site d'UGC. 

Source : www.ugc.fr 
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De meme sur le site de Clarins, qui efface la selection dechantillon lorsque 
Ton ajoute un produit au panier a partir des suggestions de cross-selling 
(figures 5-165 et 5-166). 



^f Mon 



panier 



Quantite Article 






Bain aux Pfantes "Tonic" 



Cantenancsi 200 ml 
SKU: 00GG7L00 



Prix unitaire Prix total jjjjj 
lS r 30 € lS r 30 € Suppr 



Clarins, la Beaute Responsable 

^1 Msrci ds m'snvoysr mes produits sans emballags ni dacumsntation. 



Sous-total TTC (hora frais de livraison) 



ie P 30 1 



N'oubliez pas vos produits complementaires offerts 



Continuer vos achats 



Vous aimeresauasi 



'j I to 



Huile "Tonic" 



Eaume 

Hydratant 

"Tonic" 



Gommage 
"Tonic" Corps 



■; 



■^EH 



UH 



Qtl EH 



-] 



Qts^rjT} 



3S r 9L_€ 
Achetern 



34 f 2L_€ 
Achate rn 



34 r 2L_€ 
Achetern 



= s c 1 u s i vem s n t 


pourvouE, chois-issez vos 


produH:[5.) 


sn 


dose d 


essal 


choisissez en 


1 


D 

Gommage Exfc 
Peau Nsuvs 

3 ml 


liant 


IS 

Lotion Tonique 
Camomills 

LOmL 

















E 
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Figure 5-165 

Etat de I'interface avant I'ajout d'un produit 
complementaire au panier sur le site de 
Clarins : le produit complementaire Lotion 
Tonique Camomille est coche. 
Source : www.clarins.fr 
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Figure 5-166 

Etat de I'interface apres I'ajout d'un 

produit propose en cross-selling : 

le produit complementaire Lotion 

Tonique Camomille est decoche. 

Source : www.clarins.fr 



V Mon panier 



Quantite 


Article 


Prix unitaire 


Prix total 


g 




1 


Bain aux Plantes "Tonic" 16 r 30 c 

Contenance: 200 ml 
SKU: 00SS7L00 


16 r 30 e 


Suppr 


l*U 




BJ 


Gommage "Tonic" Corps 34,21. € 

Contenance: 200mL 
SKU: 00553L00 


34 r 21 e 


Suppr 


:Q 


Clarins, la Beaute 

Pl Merci de m'envoyer 


Responsable 

mes produits sans emballage ni documentation. 










Sous-total TTC (hors Frais de livraison) 


50,51 £ 





N 1 oubliez pas vos produits complementaires ofFerts 

Exclusiv«ment pourvous, choisissez vos produrt(s) en dosed 'ess 



Gommage ExFoliant Lotion Tonique 

Peau Neuve Camomille 



Et enfin, dernier exemple de ce type sur le site de 10/18, qui efface les 
criteres de recherche quand on passe en recherche avancee. 



Figure 5-167 

Etat de I'interface sur la page d'accueil du site 

de 1 0/1 8 : j'ai renseigne le nom de I'auteur et 

le titre du livre que je veux rechercher. 

Source : www.10-18.fr 
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DETOUR ACCUEIL PLAN DU SITE CO 


nta;t copyright 










CHOISIR UN LIURE 


Jfc^ J Choisir un livre 


Recherche sur le site L£ 

Si vdus recherchez des articles 


PAR AUTEUR 


IN CM DEL AUTEUR I 




Mfc*i V 1 


(interviews, dossier magazine, 






^^^ ^1 


etc.), et non des fiches titre ou 


iJ VALIDER 


u 

cc 


T -Jl 


auteur, utilisez Tespace "chercher 






sur le site" situe dans le bloc de 






recherche (colonne de drorte) 


TITRE DU LIVRE 




au-dessous de la recherche 




^ Saisissez vos criteres de recherche 


avancee "plus de criteres" et 
au-dessusde la recherche "un livre, 
un voyage". 

l^ Aide 

Saisissez dans les champs 
correspond ants le critere de 
recherche desire. Vous pouvez 
saisir independamment un seul 
critere - ou plusieurs criteres a la 
fois pour une recherche croisee (de 


PAR COLLECTION 


Titre 


Auteur 


iJ PLUS DE CRITERE5 
UN LIVRE. UN VOYAGE 


Mot cle 


Collection | Toutes collections | t | 




Code CLIL 




Code ISBN 




Code seriel 














type-El - "). 








Le moteur de recherche ne prend 








pas en compte les majuscules ni les 








espaces. 





Figure 5-168 

Etat de I'interface apres avoir clique sur Plus 
de criteres : j'arrive effectivement sur la page 
de recherche avancee, mais mes donnees 
precedentes n'ont pas ete prises en compte. 
Je dois done les saisir a nouveau. 
Source : www.10-18.fr 
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Des modes d' interaction orientes efficience 

Nous avons vu au debut de ce livre qu'une des composantes de I'utilisabilite 
etait la notion d'efflcience. Elle est largement liee a la rapidite avec laquelle 
les internautes peuvent accomplir des actions sur votre site. II faut que les 
utilisateurs les plus a l'aise puissent beneficier de raccourcis, de moyens 
d'augmenter leur niveau d'efflcience par rapport a une utilisation basique. 

On pourrait dire que la problematique de l'efficience vaut surtout pour 
les utilisateurs experts. Attention, l'expertise est souvent confondue avec 
la frequence d'utilisation du systeme, sans pourtant que les deux soient 
interchangeables. II existe cependant une tres forte correlation entre uti- 
liser un systeme 8h par jour et le fait d'en devenir expert. On peut faire 
l'hypothese que plus votre persona passe d'heures sur votre site ou votre 
application, plus il a besoin de modes d'interaction avances, lui permet- 
tant de satisfaire le critere d'efflcience. 

Dans l'ideal, votre systeme doit etre assez flexible pour etre utilise tant 
par des novices que par des experts. Ce principe est parfois si difficile a 
satisfaire qu'il necessite de creer deux modes, simple et avance. 

Pour que votre site permette a vos internautes d'etre efficients, il faut fournir 
aux experts des accelerateurs invisibles ou non derangeants pour les novices. 
Cela passe souvent par la creation de fonctionnalites supplementaires par 
rapport a la ligne de base du site ou de l'application. Cette regie est done tres 
liee a la notion d'utilite que nous evoquions au premier chapitre. 

Les internautes que Ton va appeler experts peuvent l'etre pour plusieurs 
raisons. Ce sont en tout cas des utilisateurs qui ont particulierement 
besoin d'efflcience. Les internautes qui ne veulent pas s'embeter a parcourir 



Recommandation 

Ne demandez jamais a vos utilisateurs 

s'ils sont novices ou experts ! 

Ce n'est pas a eux d'en decider, mais aux besoins 
qu'ils rencontrent lorsqu'ils realisent une tache. 

Recommandation 
Souris pour les novices, 
clavier pour les experts 

L'utilisation du clavier est typiquement un mode 
d'interaction expert. Pensez done a faciliter le pas- 
sage de champ en champ grace a la touche Tab, 
mais pensez surtout a I'implementer de maniere 
logique en fonction de la presentation a I'ecran. 
Le clavier peut aussi servir a optimiser la selection 
d'options (dans une liste deroulante par exemple). 
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Figure 5-169 

La LISTExpress du site de Telemarket est un 

tres bon exemple de mode d'interaction 

oriente efficience : en I'utilisant, les internau- 

tes peuvent faire leurs courses tres rapide- 

ment. On ne leur propose que les types de 

produits qu'ils specifient dans leur liste. Ici, 

I'optimisation de I'efficience est directe. 

Source : www.telemarket.fr 



une arborescence profonde pour trouver ce qui les interesse, et qui ont 
besoin d'aller vite, en font partie. Prenons le cas de Telemarket, un super- 
marche en ligne : sur ce site, les internautes peuvent faire leurs courses 
grace a la fonctionnalite LISTExpress. lis renseignent l'ensemble des pro- 
duits qu'ils veulent acheter dans un champ de saisie (par exemple : farine, 
kit, eau gazeuse, etc.) et le systeme se charge d'aller rechercher les pro- 
duits correspondants. L'internaute n'a plus qua choisir ceux qui l'interessent. 
Voyez sur l'illustration suivante comme cette interface lui permet de faire 
ses courses tres rapidement. 
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Passons a une autre dimension de l'expertise. Un internaute expert, e'est 
souvent un utilisateur recurrent. Vous pouvez fournir des fonctionnalites 
qui prennent en compte ce caractere repetitif des visites. Toujours dans 
le domaine des supermarches en ligne, observez la maniere dont Houra 
repond au besoin d'efficience de ses visiteurs. Sur ce site, les clients dis- 
posant d'un compte peuvent se creer des listes de produits, dans les- 
quelles ils piocheront, a chaque commande, en fonction de leurs besoins. 
Ainsi, chaque produit peut etre ajoute dans une liste personnelle. 



Figure 5-170 

Sur le site d'Houra, grace a I'icone +, on peut ajouter n'importe quel 

produit a une liste personnelle. Cette liste est un mode d'interaction 

oriente efficience : en I'utilisant, les internautes peuvent faire leurs 

courses plus rapidement. Ici, I'optimisation de I'efficience augmente 

a mesure des utilisations de la liste personnelle. Plus l'internaute 

utilisera sa liste, plus cette derniere le rendra efficient sur le site 

d'Houra pour I'achat de ses produits courants. 

Source : www.houra.fr 
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Cette fonctionnalite accelere notoirement leurs courses pour les produits 
de base, qu'ils achetent frequemment et pour lesquels ils choisissent tou- 
jours la meme marque, le meme conditionnement, etc. 

La meme justification guide la fonctionnalite Acheter en 1 -Click d' Amazon : 
elle permet aux internautes d'utiliser leurs informations par defaut (adresse 
de livraison, adresse de facturation, coordonnees bancaires) pour com- 
mander leurs articles en un clic. Cette fonctionnalite contribue a une 
hyper-efficience, mais elle necessite que l'utilisateur en ait pleinement le 
controle. Elle est done soumise a une action explicite de la part de l'inter- 
naute. Celui-ci declare vouloir utiliser cette fonctionnalite en cliquant sur le 
bouton Acheter en 1 -Click (pour que ce bouton soit actif, il faut en outre 
que l'internaute se soit connecte avec ses identifiants client). 



Point devue 

La configuration personnalisee 

rend l'internaute efficient 

Les possibility de personnalisation fonctionnelle 
sont typiquement un mode d'interaction oriente 
efficience, puisqu'on laisse a l'internaute la liberte 
de configurer son interface pour repondre specifi- 
quement a ses besoins. 

Attention : la personnalisation fonctionnelle ne 
releve pas simplement d'un changement d'appa- 
rence via une feuille de style, mais bien d'une con- 
figuration personnalisee de I'interface (comme ce 
que proposent Netvibes, iGoogle...). 
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Figure 5-171 

Sur le site d'Amazon, grace a la fonctionnalite Acheter 
en 1 -Click, je peux passer directement de la page produit 
a la confirmation de ma commande. 
Source : www.amazon.fr 
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Le meme site utilise aussi un precede moins avance pour optimiser 
l'efficience de ses clients, precede qui, a l'inverse, n'est pas soumis a une 
demande explicite de l'internaute. Lorsque vous avez commande une pre- 
miere fois, les informations que vous avez fournies sont enregistrees et per- 
mettent au site de vous les proposer par defaut. Ainsi, Amazon vous fait 
passer directement de ridentification a la derniere etape de validation de 
commande, ou il ne vous reste plus qua confirmer (en vous laissant bien sur 
toute liberte de modifier les informations selon votre convenance). 

On a done un precede comparable mais implicite, permettant mine de 
rien aux internautes d'etre plus efficients. 

La conception de telles fonctionnalites ou modalites d'interaction doit for- 
cement etre basee sur une analyse des taches minutieuse. Elle necessite de 
se renseigner sur la maniere dont les gens achetent en ligne et sur leurs 
habitudes. Ainsi, si Ton constate qu'une grande partie des internautes se 
fait toujours livrer au meme endroit et utilise toujours le meme moyen de 
paiement, on a tout interet a leur proposer des raccourcis de ce type. 

Regie n° 10. Liberte : e'est l'internaute 
qui commande 

Votre internaute doit toujours avoir le pouvoir et le controle sur le site 
Internet, tout au moins en avoir l'impression. II donne des ordres et 
l'ordinateur repond en consequence. Vous devez done eviter de le brider, 
mais aussi de renverser les roles : l'ordinateur ne doit jamais contraindre 
l'internaute. Vos visiteurs doivent sentir qu'ils ont le systeme en main et 
que rien ne se passera sans qu'ils l'aient demande. 

Respectez les controles utilisateur conventionnels 

Pour que votre internaute sente que e'est lui qui commande, vous devez 
necessairement respecter les controles habituels en vigueur sur les autres 
sites. N'empechez jamais le fonctionnement classique d'un site, l'utilisation 
du bouton Back du navigateur, la copie d'un contenu textuel ; n'imposez 
jamais une ouverture plein-ecran sans quelle ait ete explicitement 
demandee, etc. Le fonctionnement le plus basique de votre site doit 
ainsi etre identique a celui de la majorite des sites Internet, sans quoi 
votre internaute se sentira coince. 
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Fuyez les actions au rollover 

Si l'affichage d'informations au survol de la souris est envisageable dans 
certaines conditions (voir a ce propos la regie n° 2), evitez a tout prix de 
declencher des actions au rollover. Avec ce type d'interfaces, les inter- 
nautes ont tout de suite l'impression de perdre le controle du systeme. 

Regardez ainsi l'exemple ci-contre sur le site de la Banque Postale : il 
traduit bien la difficulte liee au manque de controle des interfaces au rol- 
lover. Sur ce site, les internautes peuvent se connecter a leur compte 
bancaire en saisissant leur identifiant et leur mot de passe. L'interface de 
saisie du mot de passe ressemble a celle que Ton a deja rencontree sur le 
site du Credit Agricole. Mais le fonctionnement de celle-ci n'a rien a 
voir. Ici, c'est le survol d'un chiffre qui permet sa selection. Imaginez 
comme il est difficile de renseigner son mot de passe a 6 chiffres. 

Certaines fonctionnalites d'affichage au survol de la souris peuvent aussi 
mettre l'internaute dans des situations delicates, ou il a l'impression d'etre 
coince. Souvent, c'est d'ailleurs effectivement le cas et il doit trouver un 
moyen de contourner l'affichage reclamant une grande precision dans 
ses gestes de visee Regardez par exemple le portfolio de cette agence web, ou 
le survol de chaque vignette l'affiche en version zoomee. Comment 
pensez-vous que Ton puisse atteindre une vignette du milieu ? Apres 
avoir visualise plusieurs vignettes, c'est au final une sorte de labyrinthe, 
ou Ton doit jouer de la souris avec dexterite pour arriver a ses fins. 




Aller plus loin 
Navigation au survol de la souris 

Alex Frank nous propose avec Don't Click it un 
site entierement navigable au survol. Une expe- 
rience etonnante, oil Ton doit se concentrer pour ne 
pas survoler n'importe quoi sous peine de passer a 
une autre page ou d'enclencher un bouton d'action ! 
► http://www.dontclick.it 



Identifiant 



Mot de passe 



Sans cliquer. deplacez 
voire souris sur les ch iff res. 




Figure 5-172 

Le systeme de renseignement du mot de passe 

sur le site de la Banque Postale est tres difficile 

a utiliser. En effet, il est base sur un systeme 

ou c'est le survol de I'objet qui provoque sa 

selection. La Banque Postale lui donne le nom 

de « Glisser sans Cliquer ». 

Source : www.labanquepostale.fr 



Figure 5-173 

Interface intitiale de presentation du portfolio 
de I'agence beige The Reference. 
Source : www.thereference.be 



Figure 5-174 

La premiere vignette vient d'etre survolee sur 
le portfolio de I'agence beige The Reference. 
Source : www.thereference.be 
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Flexibility des actions utilisateur 

Toutes les fonctionnalites qui permettent aux internautes de revenir en 
arriere augmentent le sentiment de controle (mais aussi le controle reel) 
qu'ils peuvent avoir sur le systeme. 

Optimisez done la flexibilite de votre systeme en proposant des fonctions 
d'annulation (voire de undo/redo) et de retour en arriere. Accorder de telles 
possibilites aux internautes peut relever d'un veritable choix strategique. 
Par exemple, sur le site d'Amazon, on peut modifier sa commande jusqu'au 
moment de son expedition. Vous pouvez meme annuler une commande et 
ce, de maniere tees simple : tout ce que le site vous demande, e'est de pre- 
ciser le motif d'annulation d'un article ou de modification d'une quantite. 



Figure 5-175 

Le site d'Amazon me permet, dans le cas 

d'une commande non expediee, de I'annuler 

en specifiant simplement qu'elle a ete creee 

par erreur. Un bel exemple de flexibilite des 

actions utilisateur. 

Source : www.amazon.fr 



nun ex 


|jt" flies 


qufttttol 


Annulpr 
Artirlps rnrmtifiiiflps Priv Arrirlp 


f I 


Pif. rtp : IJnivprs, imiupr^ .ElrnrhpJ llJKEJ,?/ ~ 
de Regis Jauffret (Auteur) 




- I article [s) Options cade: 


ux : aucun 

vous suulidily^ drinulyi un diudu uu reduire una qudntiLy 7 Veuillez ddnt 
Lti uds diui^ir uu rriotif (obhydlui)ti* ; 




Commande creeeparerreur v 
.■-ul>7 nr>ns profiler l-s Misons .rl* vr.rr* annularinn (far-ulrarif} : 






















enquez cur ( utwft i jour la tvtnttit ) pour enregirjtrer vos chjngemcntrj puis retoumcz sur votre rcerjpitulrjtir' de 

commande. 





L'outil d'agenda propose par Google (figure 5-176) prend lui aussi le 
parti d'une grande flexibilite des actions utilisateur, notamment de celles 
qui sont les plus critiques. Par exemple, lorsque l'internaute supprime un 
rendez-vous, on ne lui demande pas de confirmer s'il souhaite effectivement 
le supprimer, afin de fluidifier l'utilisation de l'application. Les concep- 
teurs du site ont tout de meme prevu que l'utilisateur puisse annuler la 
derniere action qu'il vient d'eflectuer. Ainsi, s'il a supprime quelque chose 
par megarde, il peut immediatement restaurer l'etat precedent. 



Figure 5-176 L'agenda de Google me permet 

d'annuler la derniere action que je viens 

d'effectuer, meme si celle-ci est aussi impor- 

tante que la suppression d'un rendez-vous. 

Source : www.google.com/calendar 
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Donnez la possibility a I'internaute de contourner 
le systeme et d'agir dessus 

Vous devez aussi offrir a vos utilisateurs la possibility de contourner 
votre systeme si ce dernier est contraignant ou intrusif (vous devez 
notamment les autoriser a stopper une animation, une video ou du son, 
et, mieux encore, de controler le volume du son). 

Cette regie est notamment tres importante dans le cas de mises en avant 
aleatoires ou successives dans le meme espace ecran. Nous evoquions, a 
la regie n° 2, ce type de precede pour demultiplier la valeur du pixel 
carre. Si vous l'utilisez, pensez toutefois a fournir un moyen pour vos 
internautes de consulter l'ensemble des mises en avant. 

Si cette recommandation semble anodine et parait apporter simplement 
un moyen de navigation supplemental, il n'en est rien. Elle est capitale 
compte tenu du type de contenus presente dans ces zones, qui sont sou- 
vent des espaces promotionnels servant a mettre en avant des contenus 
internes ou de la publicite. Or c'est souvent a la suite d'une navigation 
plus orientee que l'utilisateur consulte ce type de contenus. Autrement 
dit, je viens sur le site dans un objectif bien precis, je le realise, je peux 
voir d'autres choses qui m'interessent en cours de route et n'y revenir 
qu'apres avoir accompli mon premier objectif. 

Ainsi, si j'ai vu une publicite ou une auto-promotion sur la page 
d'accueil, il est primordial que je puisse y acceder de nouveau quelques 
minutes plus tard. C'est ce que propose le site Fluctuat.net dans une 
interface tres intelligente. 



ASAVOIR 

L'attente et I'actualisation 

de la page ne sont pas des moyens 

de contournement ! 

Vous pouvez choisir differents systemes d'affi- 
chage pour presenter plusieurs contenus successi- 
vement au meme endroit : apparition aleatoire 
d'un contenu a chaque nouveau chargement de la 
page ou apparition successive de plusieurs con- 
tenus de maniere dynamique (par exemple a la 
frequence d'un contenu toutes les 8 secondes). En 
fonction du systeme adopte, si vous ne lui four- 
nissez pas de moyen de contournement explicite, 
I'internaute peut s'en trouver lui-meme : actualisa- 
tion de la page dans le premier cas, attente dans le 
second. Or, ces moyens de contournement ne sont 
absolument pas optimaux, en ce sens qu'ils degra- 
dent fortement la facilite d'utilisation de votre site. 
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Figure 5-177 Grace a la navigation proposee 
dans le bas du bandeau, on peut naviguer 
tres facilement parmi les 5 mises en avant 
de contenu du site de Fluctuat.net 
Source : www.fluctuat.net 



Autre exemple sur le site de VirginMega, ou Ton observe deux types de 
traitements differents pour la mise en avant d'un contenu. Dans le cas des 
videos, 3 mises en avant s'affichent l'une apres l'autre dans la meme zone. 
Aucun moyen de controle n'est fourni a I'internaute. Dans le cas de la 
musique, ce sont 6 mises en avant qui tournent (ou plus en fonction de 
l'actualite musicale). En revanche, on propose a I'internaute un menu de 
navigation explicite pour voir specifiquement une de ces mises en avant. 
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Adoptez le principe suivant : plus le nombre de mises en avant succes- 
sives est important, plus il est necessaire d'offrir a vos internautes un 
moyen de naviguer parmi celles-ci. 



Figure 5-178 

Grace a la navigation proposee sous le bandeau, on peut 

naviguer tres facilement parmi les mises en avant de contenu 

Musique du site de Virgin Mega. 

Source : www.virginmega.fr 
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N'induisez pas de comportement passif 

D'une maniere generate, faites tres attention a ne pas induire de compor- 
tement passif chez l'internaute, excepte lorsqu'il en a fait la demande 
explicite (par exemple en cliquant pour regarder une video ou une demo). 

L'internaute nest pas devant une television. Trop de marques concoivent 
encore leurs messages publicitaires comme des spots TV, ou les visiteurs 
regardent un message se mettre en place. Ainsi, sur le site de Roger & 
Gallet, apres avoir clique sur le lien Invitation a decouvrir la nouveaute, 
l'internaute se trouve confronte a une animation qui dure trop longtemps. 



Voyage Exotique 
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Action apaisante 




La seve de van ills 

est riche en glucides, 

en tipides 

el en mineraux. 



I a gammi?Soi:n IJoux Nature a la 
seue devanille ™>us invite a la 
cl&couverte d'une senteur inedite, 
euocatrice de tendresse et de 
reconfort- 

Pour ensavoir plus, 
cliquez ici 
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1 MINUTE 
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Figure 5-179 La presentation de la gamme Doux Nature a la seve de vanille se fait de maniere animee 

pendant une minute. Sur le Web, c'est enorme. Pour des animations de ce type, on observe qu'une grande partie 

des internautes se plaint explicitement de la longueur des les 30 premieres secondes. 

Source : www.roger-gallet.com/fr 
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Ce fonctionnement est d'autant plus dommageable qu'on ne previent 
pas l'internaute. En effet, c'est tout a fait different de dire Regarder la 
publicite de notre produit et de pretendre faire du Web alors qu'on veut 
presenter ce qui s'apparente a une pub TV. 

Soyez aussi prudent avec la mise en place animee de pages, qui prend beau- 
coup de temps et met l'internaute dans une position d'attente. C'est une 
chose de faire attendre l'internaute parce qu'une page est longue a charger 
techniquement, e'en est une autre de le faire volontairement pour produire 
un effet visuel. Attention, lorsque c'est gratuit, a ce que ce soit tees leger. 

Ce defaut est moins critique dans de tout petits sites ou uniquement sur une 
page (par exemple la page d'accueil). C'est a l'inverse beaucoup plus embe- 
tant lorsque l'internaute a envie de consulter plusieurs pages et se retrouve a 
devoir attendre, a chaque nouvelle page, que le site fasse son petit manege. 
Par exemple, sur le site d'Avene, cliquer sur un lien pour se rendre a une 
autre page impose d'abord de quitter la page en fondu, puis d'amcher la 
nouvelle page sous la forme d'un autre fondu. Total : le passage de page en 
page est long, lourd et ne donne pas envie de rester consulter le site. 



Recommandation 
La duree de I'animation doit etre courte 

Sur le Web, on doit etre tres vigilant avec I'anima- 
tion, dans le sens ou le seuil de depassement de 
I'attention est tres bas. II est tres interessant de ce 
point de vue de prendre en compte les recomman- 
dations de I'lAB (Internet Advertising Bureau) sur 
la duree maximum d'une animation publicitaire. 
L'lAB recommande de ne pas depasser 30 
secondes, voire 1 5 dans un certain nombre de cas. 
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Figure 5-180 Sur le site d'Avene, chaque passage d'une page a I'autre impose a l'internaute 4 etapes : 

page de depart, fondu vers le blanc, fondu vers la page d'arrivee, page d'arrivee. 

Source : www.eau-thermale-avene.com 



N'enfermez pas votre internaute 

Pour que votre internaute se sente libre, vous devez faire attention a ne 
pas l'enfermer, notamment en termes de navigation. 

Par exemple, Faeces aux produits sur le site de Decleor depend d'un pro- 
cessus de navigation tees lourd, ou Ton force l'internaute a faire des choix 
successifs pour definir son besoin (figure 5-181). 

Ce type de navigation peut etre interessant pour affiner la recherche 
d'un produit afin qu'il corresponde precisement aux besoins de l'inter- 
naute. II ne peut en aucun cas constituer la seule maniere de naviguer 
dans les produits. Cela est en effet tees contraignant et long pour le visi- 
teur, incite tees peu a la consultation de plusieurs produits, etc. Si vous 
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Figure 5-181 Sur le site de Decleor, I'acces aux produits est concu de maniere tres ciblee et exclusive : 

il laisse peu de place a la consultation multi-produits et multi-besoins. 

Source : www.decleor.fr 

choisissez ce type de navigation, fournissez au moins des liens de con- 
tournement (de type « Voir tous les produits »). 

Le systeme n'est pas intrusif 

La derniere recommandation qui permet a l'internaute de conserver le 
controle sur le systeme consiste a limiter ce que Ton nomme l'intrusion. 
Grossierement, cela correspond au fait que l'utilisateur ne doit pas se 
sentir contraint ou depasse par le systeme. 

Le systeme n'est pas lourd ou insistant dans ses propositions 

Si vous voulez faire des propositions a votre internaute, vous devez etre 
tres attentif a proceder de maniere raisonnee et a fournir, au besoin, un 
moyen tres simple de refuser votre proposition. Un visiteur de votre site 
ne doit pas se sentir manipule ou oblige de faire quelque chose contre 
son gre. Veillez done a ne pas tromper ni contraindre vos internautes 
sous pretexte d'inciter. 

Regardez ainsi comme le site de Pixmania semble forcer ses internautes 
a aj outer le Contrat Achat tranquille a leur commande d'un camescope 
(figure 5-182) 

Cette impression s'explique notamment par la presence simultanee de 
deux propositions, pour le Contrat Achat tranquille et pour la carte de 
fidelite. En effet, cette derniere peut etre supprimee grace a l'icone en 
forme de poubelle, icone qui ne figure pas en face du contrat Achat tran- 
quille. Les internautes pensent done que ce contrat est obligatoire. Or il 
n'en est rien, mais pour pouvoir le supprimer, il faut cliquer sur le lien En 
savoir plus, puis cocher le bouton radio Je ne souscris pas au Contrat 
Achat Tranquille dans la fenetre pop-up suivante. 
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Recapitulatif de votre commande 
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Figure 5-182 

Sur cette page de recapitulatif 
de commande du site de Pixmania, 
le contrat Achat tranquille semble 
obligatoire. A cause du manque de 
visibility d'un moyen de contourne- 
ment, cette proposition tres intrusive 
risque de faire fuir les internautes. 
Source : www.pixmania.com 
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La suppression du contrat Achat tranquille est done volontairement 
cachee, avec les risques suivants d'un point de vue utilisateur : 

• Incomprehension: «Je suis oblige de souscrire au contrat Achat 
tranquille ? Je vais acheter ailleurs... » 

• Deception : « On ne me l'a pas dit avant... » 

• Sentiment de manipulation pour ceux qui decouvrent comment sup- 
primer le contrat : « On a voulu me forcer a y souscrire, 9a ne me 
semble pas tres honnete » 

La solution consiste done a proposer sans contraindre, comme le fait tres 
bien le site de Darty. 
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Figure 5-183 

Dans le panier du site de Darty, 
on propose aux internautes 
d'etendre la periode de garantie 
de leur produit par le biais d'un 
simple bouton radio, decoche 
par defaut. 
Source : www.darty.fr 
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Recommandation 

Trop d'intrusion 

fait fuir votre internaute 



Attention lorsque vous essayez de recolter des 
informations personnelles sur votre internaute. 
Souvent, tres tot, trop tot, on a I'impression d'etre 
confronte a des questions du type « Bonjour, nom, 
prenom, numero de securite sociale et nom de 
jeune fille de votre mere ». II existe meme des 
sites oil il est necessaire de renseigner des don- 
nees personnelles pour entrer. Trop de sites, sous 
pretexte d'une demarche marketing, veulent poser 
un tas de questions pour qualifier leur cible. Or, au 
lieu de la definir, on risque ainsi de la faire fuir. 



Un dernier exemple de proposition insistante sur le site de Vichy. Lorsque 
l'internaute ferme le site, on lui demande s'il est vraiment sur de vouloir 
partir parce qu'on lui propose de repondre a un questionnaire. Cette 
demande est presentee de telle maniere quelle en devient plus intrusive. 



consuu 




Figure 5-184 

Lorsque l'internaute a deja decide de quitter 

le site de Vichy en fermant la fenetre, 

on le retient avec une alerte lui proposant 

de remplir un questionnaire. 

Source : www.vichy.fr 



Anecdote 
On a failli echapper aux splashs... 

La presence de splash pages, pre-pages ou pages 
d'introduction a un site avait tendance a diminuer 
ces dernieres annees, les concepteurs comprenant 
petit a petit leur effet nuisible d'un point de vue 
utilisateur. 

Malheureusement, il semble qu'elles commencent 
a reapparaitre sous I'impulsion du marche grandis- 
sant de la publicite sur Internet. 



Le systeme ne force pas I'utilisateur a voir quelque chose 

Eviter les introductions et fournir des entrees directes 

II est assez courant de voir des contenus affiches en preambule de celui 
demande par l'internaute. C'est le cas des introductions de site ou de 
videos, ou Ton profite de l'interet de l'internaute pour un contenu ou un 
site particulier pour le forcer a voir des contenus promotionnels (on a 
alors affaire a des messages de type « Votre video demarrera dans 25 
secondes », associes a un compte a rebours inversement proportionnel a 
la duree restante du contenu promotionnel). 

Si vous pouvez eviter ce genre de precedes, n'hesitez pas ! Sinon, pensez 
a fournir un lien direct d'acces au contenu, de type Passer /'introduction, 
Acces direct au site, etc. C'est notamment ce que pratique Allocine pour 
compenser un affichage publicitaire tres intrusif (figure 5-185). 
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Figure 5-185 

Avant de visiter une page du site Allocine, 
on propose a I'intemaute une publicite. 
On compense ce procede tres intrusif 
en lui fournissant un moyen d'acceder 
directement au site. 
Source : www.allocine.fr 
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Eviter I'affichage de pop-up spontanees 

Les memes problematiques d'intrusion regissent I'affichage sous forme 
de pop-up spontanees, c'est-a-dire qui s'ouvrent sans qu'on l'ait demande. 
La fenetre pop-up peut presenter certains avantages fonctionnels dans 
l'utilisation normale d'un site (par exemple, elle est tout a fait adaptee 
pour presenter des contenus complementaires ou d'aide, tout en conservant 
le contexte et la page source visibles en dessous). Cependant, ce n'est le 
cas que si l'internaute Fa explicitement demandee, en cliquant sur un 
lien ou un bouton provoquant l'ouverture de cette pop-up. Notez en outre 
que le format strict pop-up est a bannir de par certaines restrictions 
techniques exposees ci-contre. Vous devez lui preferer un affichage de type 
flottant, qui va venir se poser par-dessus le site. 

Les pop-up peuvent aussi etre utilisees de maniere spontanee par le site, 
mais uniquement en cas de force majeure. C'est par exemple le cas sur le 
site de Sytadin, ou la consultation du trafic peut s'accompagner d'une 
pop-up informant les internautes de travaux sur l'autoroute. II est alors 
tout a fait Justine d'employer quelque chose de fort visuellement, qui 
doit cacher le contenu initial sous peine d'etre ignore par l'internaute. 

Ce qu'il faut eviter, ce sont les pop-up promotionnelles qui sautent au 
visage des internautes alors qu'ils n'ont rien demande. 



Recommandation 

Le format pop-up est a eviter 

tant du point de vue technique 

que de I'utilisateur 

Attention au veritable format pop-up, discutable 
techniquement (il est bloque par de nombreux 
navigateurs et outils installed sur le poste client) 
mais aussi d'un point de vue utilisateur. 
En effet, un nombre non negligeable d'internautes 
ferment toute pop-up qui s'ouvre spontanement, 
avant meme que son contenu soit charge, du fait de 
la sur-utilisation de ce format par les publicitaires. 



Le site n'agit pas a la place de l'internaute 

Le site doit faire explicitement ce que l'internaute lui demande, ni plus, ni 
moins. Attention done a ne pas profiter des actions menees par l'inter- 
naute pour faire deux choses a la fois. Prenons un exemple sur le site du 
Tournaisis : dans la page des Produits du terroir, on met en avant 2 elements 
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(sur un total de 42). L'internaute a la possibilite d'ajouter ces elements a sa 
liste de selection. Or, lorsqu'il effectue cette action sur Fun des items, non 
seulement on ajoute l'element a sa selection, mais en plus on remplace les 
deux elements de la page par deux autres parmi les 42. S'il etait interesse 
par l'autre element, l'internaute ne Fa done plus directement sous les 
yeux, et doit mettre en oeuvre une nouvelle strategie pour le rechercher. 



Bienvenue dans le Tournaisis 
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Figure 5-186 

Etat initial de la page Produits 

du Terroirsur le site du Tournaisis. 

Source : www.tournaisis.be 
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Figure 5-187 

Etat de la page apres que Ton ait ajoute 

la Brasserie de Brunehaut'a la selection. 

Les deux elements de la liste precedents 

ont ete remplaces par deux nouveaux. 

Source : www.tournaisis.be 
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Ce precede est base sur la presomption suivante : une fois qu'un internaute a 
selectionne un element, il en a termine avec cet element et on peut done 
lui en proposer d'autres. Or, d'une part vous n'en savez rien, et d'autre 
part vous devez en laisser l'entiere responsabilite a votre internaute : s'il a 
envie d'aller voir ailleurs, ne vous inquietez pas, il en trouvera le moyen ! 
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Les sites d'e-commerce doivent egalement veiller a laisser le controle 
total a leurs internautes pour les actions « engageantes », telles que 
l'ajout au panier. Notamment, un article ne peut effectivement etre 
ajoute au panier que suite a un clic sur un element explicite symbolisant 
clairement cette action (que ce soit un libelle ou une icone). 
Observez a cet egard comme le site de Sushi Shop peut sembler intrusif 
pour ses visiteurs. Ces derniers peuvent en effet passer leur commande 
en ligne, en ajoutant divers produits a leur panier. Or, un simple clic sur 
la photo d'un produit ajoute automatiquement ce dernier au panier ! 
C'est mal connaitre les internautes, qui ont l'habitude qu'une image de 
produit cliquable puisse les mener au detail du produit en question. 
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Figure 5-188 

Au vu de la quantite renseignee par I'inter- 
naute (10), le site de Nicolas juge opportun de 
decider de modifier lui-meme cette quantite a 
12. Or, ce systeme met I'internaute dans une 
position passive qui risque de le contrarier. II 
est done preferable de le laisser decider seul 
de ce qu'il souhaite faire au vu des contraintes 
de conditionnement par 6 bouteilles. 
Source : www.nicolas.com 



Figure 5-189 Sur le site de Sushi Shop, 
cliquer sur I'image d'un sushi a pour effet 
de I'ajouter au panier. 
Source : www.sushishop.fr 
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Ce defaut s'avere plus ou moins genant selon le niveau de visibilite du 
panier. Lorsque ce dernier est apparent en permanence a l'ecran, l'inter- 
naute peut se rendre compte facilement du principe de fonctionnement 
du site. Mais s'il est descendu plus bas dans la page, il n'aura aucune visi- 
bilite sur ce feedback, et aura done tendance a cliquer plusieurs fois, 
pensant que le site n'a pas reagi a son premier clic. Resultat : autant 
d'ajouts de produits dans le panier... 

Notre troisieme exemple est illustre par un cas de gestion intrusive de 
l'erreur. Lorsque l'internaute se trompe, veillez a ne pas vous integrer de 
facon excessive dans la correction de cette erreur et laissez l'utilisateur libre 
de ses actes. Reprenons l'exemple du site de Nicolas, ou certains vins ne 
sont disponibles qu'en conditionnement de 6 bouteilles (figure 5-190). Le 
site accepte que l'internaute saisisse le chiffre 10 et n'agit qu'au moment 
d'ajouter le produit au panier. Au lieu de l'informer de son erreur et de le 
laisser rectifier en consequence, le site applique alors une regie automa- 
tique et adapte le nombre de bouteilles au plus proche. Or, le site n'a abso- 
lument pas le droit de decider si, au vu de cette contrainte, l'internaute va 
choisir de commander 6 ou 12 bouteilles. 

Le site de 1855 gere par exemple la meme problematique de maniere moins 
intrusive. 



Chateau Calon Segui 2003 



Figure 5-190 

Au vu de la quantite renseignee par l'inter- 
naute (1 0), le site de 1 855 lui indique simple- 
ment que e'est impossible, et lui explique la 
raison afin qu'il puisse corriger de lui-meme. 
Source : www.1855.com 



Point devue 
Le son, ce n'est pas toujours mal ! 

Le fait qu'un site joue du son n'est absolument pas 
anti-ergonomique. Pensez ainsi que la demande de 
son peut etre implicite, par exemple lorsque l'utili- 
sateur visionne une video ou consulte un site de 
musique ou de cinema : e'est alors meme conseille 
puisque cela peut optimiser I'experience utilisa- 
teur. L'utilisateur doit neanmoins s'y attendre et 
e'est done plus genant sur un site bancaire ou ven- 
dant des vetements. Lorsque votre site joue du 
son, fournissez une possibility tres visible et tres 
explicite de le stopper. Lorsque le son accompagne 
le contenu et a une reelle utilite, ajoutez-y la pos- 
sibilite de regler le volume. 
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Au secours, le site prend le controle de I'ordinateur 

II est tres important que l'internaute puisse observer une stricte corres- 
pondance entre ce qu'il a demande et ce qu'il obtient. Notamment, vous 
devez eviter que votre site ouvre une application logicielle sur le poste 
client (Outlook, Thunderbird, Windows Media Player, Itunes, etc.). Ce 
type de fonctionnement est tres frequent avec les fonctionnalites de con- 
tact qui ouvrent un nouveau message pre-rempli dans un client de mes- 
sagerie (figure 5-191). 

Evitez aussi de jouer une bande son alors que l'utilisateur ne l'a pas 
demande. Par exemple, au chargement du site Autour de Bebe en aout 
2007, on avait soudain l'impression de se retrouver dans une galerie 
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Figure 5-191 

Sur le site de Virgin Mega, un simple die 
sur le lien Envoyera un am/demarre 
I'application de messagerie et cree 
un nouvel e-mail pre-renseigne. 
Source : www.virginmega.fr 



commerciale avec une animatrice au micro, nous vantant les merites du 
site. Rien a voir avec du Web et rien de plus intrusif. 

Quant au site d'E-Leclerc, il impose, lui, a ses visiteurs une sorte d'assis- 
tant sous la forme d'une souris dotee d'une voix, qui intervient sur la 
page d'accueil pour proposer son aide. Or, e'est typiquement le type 
d'intrusion qui risque de faire fuirvos internautes. Paradoxalement, alors 
que vous souhaitiez les aider, ils vont se sentir agresses et tout de suite 
chercher comment faire cesser cette voix. 



E.LECLERC (J) 




Figure 5-192 La souris qui souhaite aider les 
internautes sur le site d'E-Leclerc risque de ne 
reussir qu'a les agacer, tant son apparition est 
intrusive. Source : www.e-leclerc.com 
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La publicite web est tres douee pour aller a l'encontre de ce principe de 
soumission de l'ordinateur : souvent, elle se presente sous des formats 
tres intrusifs pour l'internaute, qui le contraignent a « assister » a la 
publicite. Si vous adoptez des choix risques de ce point de vue, prevoyez 
done toujours une porte de sortie pour l'internaute, un moyen de con- 
tournement de ce que vous lui imposez par defaut. Enfin, vous devez 
non seulement fournir cette solution de contournement, mais aussi la 
rendre visible, explicite et facile a utiliser. 



VOCABULAIRE 
Compatibility ou accessibility 
technologique, meme combat 

On parle aussi bien de compatibility technologique 
que d'accessibilite technologique. Notez cepen- 
dant que le mot de compatibility integre I'idee 
qu'il existe une version de base, une plate-forme 
ideale pour consulter le site a son maximum. 



Regie nil. Accessibility : un site facile 
d'acces pour tous 

Idealement, tout le monde devrait pouvoir acceder aux contenus de votre 
site web. Dans les faits, e'est surtout important pour votre population 
cible. Deux versants de l'accessibilite sont a prendre en compte : son 
aspect physique et son aspect technologique. 

Accessibility physique 

Pour tout ce qui touche a l'accessibilite physique, votre site devrait etre 
prevu de maniere a en permettre l'acces a tous les internautes, quel que 
soit le canal perceptif par lequel ils consultent votre site. En effet, 
l'important n'est pas que votre site soit percu par tous les visiteurs de la 
meme maniere, mais plutot que tout le monde puisse beneficier de ses 
contenus selon les modalites perceptives qui lui conviennent le mieux. 

Nous avons largement traite des problematiques d'accessibilite visuelle 
dans le chapitre 3. Vous trouverez aussi au prochain chapitre quelques 
outils tres interessants pour auditer l'accessibilite visuelle de votre site 
d'un point de vue utilisateur. II s'agit alors d'evaluer l'accessibilite 
visuelle non seulement pour les internautes ayant des difficultes sur ce 
plan, mais pour tous les internautes en general ! 

Accessibility technologique 

Le second versant de l'accessibilite d'un site porte sur les aspects techno- 
logiques. II se refere aux possibilites d'acces a votre site quel que soit le 
materiel a partir duquel l'internaute le consulte. La encore, il n'est en aucun 
cas question que le site se presente de la meme maniere quel que soit le sup- 
port, mais plutot qu'il soit consultable depuis n'importe quelle plate-forme. 

Plusieurs dimensions caracterisent une plate-forme : systeme d'exploitation, 
navigateurs, tailles et resolutions d'ecran (nous en parlons au chapitre 9), 
fonctions activees (Javascript, affichage des images, cookies, etc.), plug-in 
installes (Flash et versions de Flash, machine virtuelle Java, etc.), logiciels 
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installes (Acrobat Reader, RealPlayer, Windows Media Player, etc.). Elles 
doivent done etre prises en compte pour optimiser l'accessibilite techno- 
logique d'un site. 

Les contextes et supports sur lesquels vos utilisateurs vont consulter votre 
interface ou sen servir ont aussi des incidences sur sa conception. Si vos 
internautes se servent de votre application sur un equipement portable, 
vous devrez inclure cet aspect dans vos contraintes de specifications. 

Vous devez proscrire les messages de type « Ce site est optimise pour 
une consultation sous le navigateur XXX, en resolution XXX. Veuillez 
done vous y conformer ». Essayer plutot de prendre en compte les taux 
de penetration des plate-formes dans votre population cible et de mettre 
les ressources necessaires pour vous y adapter. 

Deux situations sont envisageables : soit la configuration de plate-forme 
de votre internaute correspond a la plate-forme optimale, soit elle en 
devie. Dans ce cas, vous devez agir selon l'adequation exigee entre la 
plate-forme utilisateur et la plate-forme ideale. 

La plate-forme de consultation est de I'ordre du bonus : 
adaptez le contenu 

Dans l'ideal, commencez par adapter le contenu presente au visiteur a la 
configuration de son navigateur. Cet ajustement peut se faire grace a une 
detection automatique de la configuration du poste client. 

Vous serez dans ce cas si votre contenu peut etre visualise et utilise sous 
une configuration degradee, ne correspondant pas a la configuration 
ideale. Par exemple, vous proposez une version statique, image, d'un 
contenu Flash peu important plutot que rien. C'est le cas sur le site des 
editions Asmodee, pour les bandeaux d'auto-promotion : si l'internaute 
ne dispose pas du plug-in Flash (ou s'il est trop ancien), on lui presente 
automatiquement une version jpeg du meme contenu. 

Vous serez dans une situation analogue si vous avez prevu plusieurs versions 
de site selon que le plug-in Flash est disponible ou non. Par exemple, le site 
de la societe de production Soixan7e Quin5e est developpe a la fois en 
Flash et en HTML. Le Flash n'etant present que pour optimiser finement 
l'experience utilisateur (installation progressive des ecrans, insertion de vir- 
gules sonores en correspondance avec les actions utilisateur, etc.), on pre- 
sente automatiquement aux navigateurs depourvus de Flash la version 
HTML du site (qui ressemble enormement a sa version Flash). 

Notez que ce type de strategie permet aussi d'optimiser le referencement 
d'un site Flash : en effet, les crawlers des moteurs de recherche prefereront 
la version texte du site. 

Abordons enfin la gestion des mecanismes bases sur Javascript, dans les 
cas ou ce langage est desactive sur l'ordinateur client. Si vous pouvez 
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accepter que votre internaute se passe des avantages d'interaction et 
d'interface prevus grace a la technologie Javascript, alors presentez-lui 
d'office ce que Ton appelle la version degradee de votre site ou de votre 
application (vous prevoirez neanmoins des liens explicites de passage a 
l'une ou l'autre des versions). 

La plate-forme de consultation est strategique : informez et guidez 

En second lieu, s'il est vraiment dommage que l'internaute ne puisse pas 
acceder aux contenus, vous devez Ten informer et lui fournir (lorsque 
c'est possible) un lien pour mettre a jour sa plate-forme ou en activer 
certaines options. 

Reprenons le cas des mecanismes bases sur Javascript, dans l'hypothese 
ou le Javascript est desactive sur l'ordinateur de l'internaute. Si vous ne 
pouvez vous en passer, vous devez informer votre internaute que le site 
necessite l'activation de Javascript, puis le guider dans cette operation. 



Regie n° 12. Satisfaction de votre internaute 

La regie n° 12 passe avant toutes les autres. C'est la seule qui peut vous 
autoriser a remettre en question toutes les autres. Satisfaire votre internaute 
necessite de prendre en compte les besoins de vos personas en tant qu'etre 
humains (voir chapitre 3) mais aussi et surtout leurs besoins en tant qu'inter- 
nautes specifiques dans un contexte specifique, avec des objectifs specifi- 
ques. Notez que les 11 regies precedentes participent aussi du niveau de 
satisfaction de vos internautes. Si vous reussissez a les prendre en compte, 
vos visiteurs seront tres satisfaits de la qualite d'utilisation de votre site. 
La satisfaction est le critere le plus difficile a mesurer. En dehors de la 
facilite d'utilisation et de l'efficience, elle recouvre des problematiques 
d'utilite (contenu et fonctionnalites), de qualite de service, d'esthetique 
et d'experience utilisateur. 

Satisfaire grace au critere d'utilite 

Un site utile est un site qui fournit du bon contenu a ses internautes, un 
service leur permettant de remplir leurs objectifs, ainsi que des utilites de 
second niveau optimisant la satisfaction. Nous verrons au chapitre 7 
l'importance des micro-fonctionnalites permettant de rassurer votre 
internaute et de stimuler la decision d'achat. 

Ces dernieres doivent etre parfaitement adaptees au site et aux besoins 
de vos internautes. Par exemple, sur les pages produit du site de Kiabi, 
on peut cliquer sur deux boutons pour consulter un produit de la meme 
categorie : - cher ou + cher (figure 5-193). 
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Les micro-fonctionnalites peuvent aller tres loin et etre concues exclusi- 
vement pour la satisfaction de l'internaute. Par exemple, le site d'Apple 
fournit une fonctionnalite tres agreable lors de la personnalisation d'un 
iPod avec un message a graver. Elle consiste a pouvoir observer en temps 
reel l'effet visuel du message que Ton aura renseigne. 



Figure 5-193 

Sur le site de Kiabi, les boutons - cher et 
+ cher permettent de consulter d'autres arti- 
cles a manches courtes en partant du prix de 
celui que Ton est en train de regarder. 
Source : www.kiabi.com 



Point devue Impliquer votre internaute 
pour mieux le satisfaire 

Les micro-fonctionnalites peuvent aussi consister a 
impliquer activement vos internautes dans le site. 
Par exemple, sur le site de Reservoir Jeux, on pro- 
pose aux visiteurs d'affiner les suggestions de pro- 
duits offertes par le site, grace aux fonctions 
suivantes : Je possede ce produit, Ne plus 
me suggerer ce produit, Mauvaise recom- 
mandation. En outre, une fonction avancee 
permet de consulter les articles ayant influence les 
suggestions, avec la possibilite de demander de 
Ne pas utiliser ce produit pour mes sug- 
gestions personnalisees. Ainsi, l'internaute 
devient veritablement acteur du site web, avec a la 
cle une plus forte satisfaction utilisateur. 
Source : www.reservoir-jeux.com 
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La gravy re iPod est une operation simple et gratuite. 
voussuffrtde nous indquer le message que vous 
scuhaitez fa ire graver. 
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Ceci estun 
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message a graver 



N'oublez pasde ben verifier Torthographede votre 
message, les iPod graves n'etant pas repris. 



Expediesous: 24 h 
Livraison gratuite 



Eur 259,00 
^\ E3 Ceci est un cadeau 





Figure 5-194 

Sur le site d'Apple, je peux voir en direct I'allure 
du message que je souhaite graver sur mon iPod. 
Source : www.apple.fr 



Avouons que c'est autre chose que de voir ce message uniquement dans un 
champ de saisie texte. Bien sur, c'est tout a fait inutile si Ton park en termes 
purement commerciaux : a cette etape, les internautes ont deja choisi 
d'acheter un iPod et pouvoir simuler « en contexte » la gravure de leur mes- 
sage n'aura sans doute pas d'influence sur leur choix d'acheter ou non 
l'artick. Cela n'aura d'influence que sur le message en question ou son 



221 



absence (la visualisation de l'effet reel peut en effet amener l'internaute a 
choisir de laisser son iPod vierge). Ici, il s'agit done seulement de plaisir et 
d'implication utilisateur. Gardez toujours a l'esprit que ce genre de cadeaux 
a vos internautes vous permettra de faire decoller votre cote de satisfaction. 

En complement de ce service, une nouvelle fonctionnalite est apparue sur le 
site d'Apple, qui propose desormais une galerie de gravure, pour les inter- 
nautes en manque d'inspiration (figure 5-195). Au-dela du reel service 
rendu, cette galerie a aussi l'avantage de jouer sur le cote humoristique, et de 
participer ainsi a l'experience que le client Apple entretient avec la marque. 



Figure 5-195 Sur le site d'Apple, une galerie 

de messages a graver pour iPod permet de 

rendre service avec humour et ainsi d'optimi- 

ser le taux d'utilisation du service de gravure. 

Source : www.apple.fr 
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Satisfaire grace a l'esthetique et a I' experience 
utilisateur globale 

Nous avons largement explique, au chapitre 2, que la qualite graphique 
peut augmenter la perception subjective de l'utilisabilite d'un site. De 
toutes facons, elle participe de l'experience utilisateur globale. Un site beau, 
plaisant, motivant, voire ludique, permettra de satisfaire vos internautes. 

Satisfaire grace a la qualite du service 

Pour satisfaire vos visiteurs, vous devez aussi vous attacher a leur fournir 
un service respectueux, a la fois avant toute transaction, mais aussi en 
termes de service apres vente. Notez que cette recommandation ne 
s'applique pas seulement aux sites d'e-commerce. Ainsi, fournir une 
possibility de se desinscrire d'une newsletter est une maniere de satisfaire 
grace a la qualite de service. 
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Satisfaire grace a la puissance et la fiabilite technique 

Pour finir, votre site doit fonctionner ! II doit etre puissant tant au niveau 
fonctionnel (c'est souvent problematique avec les moteurs de recherche) 
qu'en termes de fiabilite : traquez les erreurs techniques, liens casses, pages 
en construction, lenteurs de chargement, mauvaise gestion des URL, etc. 

Dans ce domaine, vous devez oublier le reflexe suivant lequel « cela n'arrive 
qu'aux autres ». A l'heure ou nous parlons, si vous tapez http://volkswagen.fr 
dans la barre d'adresses de votre navigateur, vous tombez sur le message 
suivant, noir sur blanc : Forbidden - You don't have permission to access / 
on this server. Dans la meme veine, si vous essayez http://sncf.fr, vous 
tombez sur le message Maintenance sur le site. Rappelez-vous done que 
ce type d'oubli peut arriver meme sur des sites tees controles ou tees 
visites : il est tees facile de negliger le detail qui suscitera ou non la con- 
fiance de vos internautes dans la qualite technique de votre site. 



E 



I 
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En bref : 12 regies a utiliser a bon escient 

Si vous appliquez l'ensemble de ces 12 regies sur votre site web, vous devriez 
eviter les principaux ecueils d'un point de vue ergonomique. Ces regies doi- 
vent devenir un reflexe a la fois en conception et en evaluation d'interfaces. 
Faites-en un veritable post-it mental, afin d'en disposer en permanence. 

II est indispensable de comprendre comment ces regies peuvent se com- 
penser les unes par rapport aux autres. Nous en avons aborde quelques 
exemples au fil de ce chapitre, mais evoquerons cette problematique 
de maniere plus detaillee au prochain chapitre, consacre a la methode de 
l'audit ergonomique. 
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chapitre 



6 




L'audit ergonomique : 
conseils et methodologie 



Vous avez un site Internet et souhaitez evaluer son niveau 
de qualite d'un point de vue ergonomique ? La methodologie 
de l'audit est la pour cela. 



SOMMAIRE 

► Methodologie de l'audit 
ergonomique 

► Des exigences dependant 
fortement des specificites 
projet 

► La mise en ceuvre d'un audit 

MOTS-CLES 

► Audit ergonomique 

► Inspection experte 

► Ajax 

► Seniors 

► Outils pour l'audit 



METHODOLOGIE Et si je saute cette etape ? 

Nous verrons dans ce chapitre qu'il existe une 
grande difference entre ce que Ton appelle I'audit 
formel et I'audit informel. Si le premier est tout a 
fait optionnel (il doit etre integre a une demarche 
explicite visant a evaluer la qualite d'utilisation de 
votre site), le second est plus flou. En effet, I'audit 
informel devient une activite plus ou moins auto- 
matique des lors que vous commencez a avoir des 
bases en ergonomie web. 

Vous verrez qu'apres la lecture de ce livre, vous 
pourrez difficilement sauter I'etape de I'audit 
informel ! 



METHODOLOGIE Les regies d'ergonomie 

doivent etre appliquees en profondeur, 

pour tous les details d'un projet 

Si vous considerez que I'ergonomie est un para- 
metre important, vous devez vous donner les 
moyens de I'inclure dans tous les processus de 
decision (par exemple, sur I'utilite d'une nouvelle 
fonctionnalite, ('implementation de cette fonction- 
nalite, le libelle d'un bouton, I'organisation d'une 
page produit). Plus vous serez proche de 
I'ensemble de I'equipe projet, plus vous pourrez 
influencer ces micro-decisions dans le sens du con- 
fort utilisateur. 



VOCABULAIRE Les synonymes de I'audit 

Que vous entendiez les termes d'audit, devalua- 
tion ou d'inspection experte, on parle de la meme 
chose. 



Vous avez lu attentivement le chapitre precedent et connaissez les 
12 regies de I'ergonomie web sur le bout des doigts ? Tant mieux car ce 
sont elles qui vous aideront a evaluer la qualite ergonomique d'un site. 
Cependant, il ne suffit pas d'avoir retenu ces principes. Vous devez 
apprendre a les utiliser dans des contextes precis et connaitre toutes les 
ficelles de I'audit. 



Pratique, support et moyens de I'audit 
ergonomique 

L' audit ergonomique n'est pas une methode reservee aux experts. II con- 
siste a observer une interface a la lumiere des objectifs de I'ergonomie. Si 
vous reussissez a vous approprier cette demarche et ses fondements 
theoriques, qui que vous soyez, vous serez capable de conduire un audit 
ergonomique. Bien sur, l'expert aura des reflexes d'analyse et il sera plus 
avance dans sa pratique. Mais comprenez bien que se preoccuper de 
I'ergonomie, c'est deja avoir fait un grand pas. 

Ne reservez done pas le jugement sur I'ergonomie de votre site a des 
intervenants externes, en estimant ne pas avoir les capacites necessaires. 
II est primordial de pouvoir prendre une decision avec tous les parametres 
en main. 

Chaque metier se comporte differemment, veille a des thematiques bien 
particulieres en fonction des taches qui lui incombent. Si Ton prend 
l'exemple d'un site devant etre tees accessible d'un point de vue visuel, le 
designer se charge de la partie concernant le role des couleurs, des contrastes 
de couleur fond/caracteres ; l'integrateur prend le relais en developpant le 
site de telle maniere a ce qu'il soit optimise du point de vue technique. 

L evaluation ergonomique, une pratique multiforme 

Consacre a I'audit ergonomique, ce chapitre hen traite pas seulement en 
tant que methode ponctuelle. II a surtout pour ambition de vous fournir 
des regies et reflexes pour avoir un regard sur I'ergonomie de votre site a 
tout moment. En effet, comprendre les principes de I'audit vous per- 
mettra d'avoir toujours en tete les points a surveiller pour optimiser 
I'ergonomie d'un site. 

Tous les acteurs d'un projet web devraient avoir des connaissances de 
base, un regard et un comportement de travail orientes utilisateur. Si, 
en plus, une ou plusieurs personnes peuvent etre considerees comme 
responsables de I'ergonomie du site, c'est encore mieux. 
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Ces garants de l'ergonomie du site doivent mettre en oeuvre des 
methodes de conception et devaluation poussees, qui permettent 
d'assurer un bon niveau d'ergonomie. Cependant, ce n'est pas suffisant. 
Faire de l'ergonomie tout seul dans son coin est rarement un gage de 
reussite. Pour aller encore plus loin et viser l'ergonomie « ideale », les 
principes de l'ergonomie doivent etre connus et appliques par tous, 
chacun a son niveau. 

En tant que responsable de site web, chef de projet, directeur artistique, 
concepteur, etc., c'est au jour le jour que vous devez etre capable de juger 
de la qualite ergonomique de votre site web et d'agir dessus. Sans exclure 
l'importance des sessions d'audit approfondi, que Ton doit pouvoir 
lancer de maniere reguliere et aux moments-cles de la vie d'un projet. II 
est important que vous puissiez reagir sur le vif a vos problematiques 
quotidiennes, en gardant ces notions d'ergonomie en arriere plan. 

Les questions du quand et du comment sont presque interchangeables. 
En effet, la maniere de pratiquer l'ergonomie est tres liee aux moments 
ou elle peut etre mise en oeuvre, et surtout au fait que ces moments 
soient ou non explicitement consacres a une reflexion ergonomique. On 
peut ainsi distinguer deux grandes composantes de l'application des 
regies d'ergonomie web. 

D'une part, l'ergonomie silencieuse, celle qui s'exprime dans tous nos 
choix. Cette ergonomie-la ne demande pas de temps ni d'efforts parti- 
culiers pour etre mise en application. Elle est en quelque sorte perma- 
nente, puisqu'elle provient d'une « configuration » de notre cerveau 
integrant les principes de l'ergonomie. Developpeurs, graphistes, chefs 
de projets, concepteurs, participent tous a la qualite ergonomique gene- 
rale, mais ils y participent d'autant mieux lorsqu'ils connaissent les 
grandes regies de l'ergonomie web. Leur metier reste le meme, mais il 
prend une couleur orientee utilisateur. 

Dans ce cas, on applique l'ergonomie a tout instant : au jour le jour, du 
fait de nouvelles connaissances en ergonomie, vous exercez votre metier 
differemment, vous pensez differemment, vous incluez les regies ergo- 
nomiques dans votre pratique. De plus, vous reperez des choses qui vous 
avaient echappees auparavant. Cela s'appelle Yaudit ergonomique 
informel : vous ne l'aviez pas prevu, mais il se trouve que vous tombez sur 
certains defauts de l'interface et vous les corrigez ou les incluez dans le 
planning de mises a jour de votre site. 

D'autre part, lorsqu'une personne se consacre entierement a la concep- 
tion ergonomique dans un projet web, elle applique les regies a travers la 
mise en oeuvre de methodes d'ergonomie. Les occurrences de la pratique 
ergonomique sont alors decidees en amont. Par exemple, on determine 
que, le mois prochain, on conduira une evaluation ergonomique du site. 



METHODE Objectif ergonomie 

Que tout le monde aille dans la meme direction - 
celle du bien-etre de I'internaute - n'arrive pas par 
hasard. II faut evidemment que cet objectif soit 
pose des le depart comme vocation centrale du 
projet et que Ton donne aux equipes les moyens de 
I'atteindre : formations de base en ergonomie, reu- 
nions, allers-retours frequents pour des validations 
avec la personne chargee de l'ergonomie, etc. 



Methode Posologie : a prendre en continu 

Entreprendre d'optimiser l'ergonomie de son site 
web n'est pas uniquement une affaire de certifica- 
tion. La qualite d'utilisation globale d'un site 
depend fortement de la qualite ergonomique de 
chacune des decisions prises quotidiennement 
dans un projet web. 

Vous pouvez tout a fait prendre en charge l'ergo- 
nomie de votre site au jour le jour et, a des 
moments des de la vie du site, engager des 
actions de validation plus formelles aupres d'un 
expert. 
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Ce type devaluation releve de Y audit formel. A intervalles reguliers, vous 
prenez le temps d'effectuer une passe d'ergonomie sur votre site ou seu- 
lement sur une partie de ce dernier (l'audit peut en effet se focaliser sur 
une seule page, une fonctionnalite, la navigation, etc.). 

II y a des moments-cles dans la vie d'un site qui sont plus appropries 
pour conduire des audits approfondis et formels : 

• Tres en amont, lorsque Ton engage un processus de refonte du site. 

• Apres l'intervention de chaque cellule metier, afin de valider les reali- 
sations et avant que les responsables suivants ne prennent le relais. 
Par exemple, on valide le design graphique d'un point de vue ergono- 
mique avant de l'integrer techniquement. 

• Qyelques temps apres une mise en ligne, lorsque le site a eu le temps 
de vivre, de bouger, d'etre nourri de nouveaux contenus ou produits, 
lorsque les internautes ont interagi avec, etc. 

On peut envisager d'avoir un seul responsable des problematiques 
d'ergonomie dans l'equipe projet. Cependant, cela necessite forcement 
beaucoup d'allers-retours, souvent sur des details qui pourraient etre 
geres par les equipes en amont. 

Tableau 6-1 Deux grands types de pratique de I'ergonomie web 





Ergonomie formelle 


Ergonomie informelle 


Pratique 


L'ergonomie formelle en appelle a la 
mise en oeuvre de methodologies speci- 
fiques, expertes ou requerant la partici- 
pation d'internautes. 


L'ergonomie informelle est silencieuse : que Ton optimise l'ergonomie ou pas, rien ne 
differe au niveau du travail en sortie (autrement dit, on livre les memes choses). Ce 
sont les choix mis en place qui sont plus ou moins ergonomiques. 


Amplitude 


Tout le site ou une partie bien specifique. 


Disseminee dans tout le site, selon le travail quotidien. 


Dedencheur 


On cherche a prendre des decisions 
d'ergonomie. 


Ne se decide pas : on est confronte a une decision ayant un effet sur l'ergonomie du site. 


Acteurs 


Responsable de l'ergonomie. 


Tous les corps de metier du Web. 


Duree 


Duree affecr.ee a l'intervention, souvent 
determinee en amont. 


Zero. Prendre une decision valable en termes de qualite ergonomique ne demande pas 
plus de temps dans I'absolu. Si operer un choix d'ergonomie necessite trap de temps, 
c'est probablement que la reflexion doit en etre confiee au responsable de l'ergonomie 
(dont le metier est de passer du temps sur de telles problematiques). 
La mise en ceuvre d'une solution orientee utilisateur peut prendre plus de temps 
qu'une solution moins ergonomique, mais attention, I'inverse peut etre tout aussi vrai 
(particulierement lorsque Ton developpe des fonctionnalites inutiles pour I'internaute 
et qui risquent de rendre I'interface plus complexe : on passe alors du temps sur leur 
conception et leur developpement alors qu'elles ne sont pas necessaires). 



Support et peri metre de revaluation ergonomique 

Que peut-on auditer ? Lorsqu'on parle d'audit ergonomique, on s'ima- 
gine souvent evaluer un site web ou une application en ligne. Or ce nest 
pas le seul type d'interfaces qui vaille la peine d'etre valide. 
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Vous pouvez auditer les storyboards ou maquettes conceptuelles, mais 
aussi les propositions graphiques et, pour finir, la sortie en termes d'inter- 
face finale, completement fonctionnelle. II est d'ailleurs recommande de 
proceder a ce type devaluation le plus tot possible, afin d'eviter le deve- 
loppement de principes d'interface qui ne fonctionnent pas d'un point de 
vue utilisateur. Autrement dit, il est dommage de developper un site en 
entier pour se confronter, lors de l'audit final, au constat que tout est a 
refaire pour atteindre une qualite ergonomique minimale. 

Dans l'absolu, vous pouvez meme auditer des cahiers des charges ou des 
cahiers de specifications generales et detaillees : ce sont des documents 
essentiellement textuels, mais qui peuvent deja satisfaire certains criteres 
d'ergonomie ou, a l'inverse, entrer en conflit avec d'autres criteres. 

Les problematiques ciblees lors d'un audit sont souvent liees au support 
dont il est l'objet. Voici quelques exemples de ces tendances thematiques 
en fonction de l'interface analysee : 

• Devaluation ergonomique d'un cahier des charges est souvent tres 
centree sur les problematiques d'utilite. Par exemple, ce type de 
documents contient souvent une liste exhaustive des fonctionnalites ; 
on peut analyser chacune d'entre elles en regard de l'interet quelle 
presente pour vos personas. 

• Lors de l'audit de maquettes graphiques, vous allez evaluer la lisibi- 
lite, alors que vous n'aborderez sans doute pas ce point lors de l'audit 
d'une maquette conceptuelle (sauf si cette derniere est tres mal 
concue et illisible...). 

• Lors de l'audit de maquettes graphiques, vous allez etudier l'accessibi- 
lite visuelle du point de vue des contrastes entre couleurs et des even- 
tuelles fonctionnalites explicitement prevues pour faciliter la lecture. 
Lors de l'audit d'un site fonctionnel, vous allez aussi evaluer l'accessibi- 
lite visuelle, mais en vous concentrant sur des problematiques d'imple- 
mentation technique, de moyens de contournement et d'alternatives 
fournies aux deficients visuels. Si vous avez deja valide les maquettes 
graphiques, vous n'aurez plus besoin de traiter les problematiques de 
contrastes entre les couleurs des caracteres et celles du fond. 

• Lors de l'audit d'un site completement fonctionnel, vous allez ana- 
lyser des elements invisibles ou difficiles a evaluer dans une maquette 
conceptuelle ou graphique : duree subjective des feedbacks, mouve- 
ments de l'interface, fonctionnement d'un drag & drop, temps de 
chargement, pertinence des reponses du systeme (par exemple dans 
un moteur de recherche), etc. 

• Et ainsi de suite... II existe de nombreux exemples illustrant les con- 
sequences qua le support analyse sur les thematiques abordees dans 
le rapport d'audit. 
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Methode L'utilite des regies 
ergonomiques en conception 

Lorsque vous concevez des principes d'interaction, 
d'organisation de I'information ou des maquettes 
fonctionnelles, vous conduisez un audit en temps 
reel de chacune des solutions envisagees afin de 
choisir la plus appropriee. Autrement dit, vous 
faites des allers-retours constants dans votre tete 
entre vos intuitions et leur confrontation aux 
regies d'ergonomie. 
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Methodologie 
Le perimetre d'un audit est flexible, 
mais doit etre determine en amont 

Vous n'etes pas oblige d'analyser la totalite du 
site ! Lors d'un audit formel, vous decidez du peri- 
metre d'action avant d'entrer en action. Vous 
devez done savoir avant de commencer votre eva- 
luation sur quoi elle porte, quel en est I'objet. 



C'est a vous de decider du perimetre de l'audit ergonomique. Les preoc- 
cupations marketing ou strategiques sont souvent un bon moyen 
d'orienter l'audit ergonomique vers une thematique ou une autre. 

Ce perimetre determinera aussi la nature des points que vous allez eva- 
luer. Par exemple, si vous n'auditez que le panier, vous ne traiterez pro- 
bablement pas d'architecture de l'information. 

Une fois posees ces bases methodologiques, entrons dans le vif du sujet, 
a savoir a l'outil principal qui va vous permettre de conduire l'audit : les 
connaissances ergonomiques. 



Normes, conventions, criteres, checklists & co 

De nombreuses normes existent pour supporter l'audit ergonomique. 
Souvent issues de longs travaux de creation et de validation, elles four- 
nissent un socle solide pour guider l'audit. 

Cependant, il faut savoir les utiliser pour ce qu' elles sont, a savoir des 
normes generiques : elles garantissent une qualite d'utilisation minimale 
mais n'assurent pas d'avoir choisi la meilleure solution. 

Toutes les normes qui vous donnent des regies d'interface sont dange- 
reuses puisque, par essence, elles ne peuvent tenir compte du contexte. 
Or, l'ergonomie etant une discipline du compromis, on se retrouve regu- 
lierement, du fait d'un contexte specifique, dans des situations de con- 
tradiction avec les normes. Veillez done particulierement aux normes qui 
posent des contraintes rigides. 

II y a une grande difference entre prendre en compte des regies (telles 
que celles du chapitre precedent) et essayer d'en extraire des checklists 
detaillees ou Ton viendrait evaluer la satisfaction d'une solution d'inter- 
face. Si vous cochez des assertions de type « La barre de navigation prin- 
cipal contient un bouton Accueil », vous prenez deux risques : 

1 D'abord, vous risquez de croire qu'il est suffisant d'avoir coche 
l'ensemble des points de la checklist. Adopter ce type de methode a 
l'aveuglette est tres dangereux, car une checklist ne peut pas etre 
exhaustive et ne peut done garantir que vous aurez detecte l'ensemble 
des defauts du site. 

2 Ensuite, d'un point de vue plus specifique, vous risquez de ne pas 
remettre en cause l'utilite du bouton Accueil. Les compromis sont 
parfois si difficiles a realiser qu'un critere plus important peut 
remettre en question la presence d'un bouton Accueil meme si, dans 
la plupart des cas, il est hautement recommande. Le fait est qu'une 
recommandation ergonomique n'est pas une recommandation in vitro. 
Elle entre en interaction avec d'autres recommandations ergonomiques. 
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Parfois, cette interaction devient une lutte ou Ton pese le pour et le 
contre de chaque recommandation au regard des autres. 

De telles checklists sont plus appropriees dans des contextes controles, 
par exemple dans le cadre d'une entreprise qui beneficie d'une charte 
ergonomique que toutes les interfaces doivent respecter. Ce type de 
norme est en effet interessant pour assurer la coherence a l'interieur d'un 
site, mais aussi entre plusieurs sites. 

En outre, et de maniere assez paradoxale, la checklist penalise surtout les 
debutants, qui pensent (parfois de maniere injustifiee) quelle les protege 
contre les erreurs. Si vous utilisez une recommandation d'interface, il 
faut done etre bien conscient de son utilite et de ses limites. II est force- 
ment conseille d'appliquer des recommandations d'interface plutot que 
d'ignorer les principes de l'ergonomie. Cependant, il faudra alors savoir 
quand un ecart a la recommandation est envisageable sans penaliser la 
qualite ergonomique. 

Dans l'absolu, une norme ergonomique vous donne une regie pour con- 
cevoir votre interface en obtenant un effet sur l'internaute. On va, par 
exemple, vous recommander de donner du feedback. C'est le principe 
ergonomique. Vous pouvez appliquer ce principe de diverses manieres 
en termes d'interface. Vous devez done juger si l'interface que vous 
regardez, ou celle que vous imaginez, est en accord ou en contradiction 
avec l'ensemble des principes ergonomiques de ce type. 

Chaque specialiste se cree en general sa propre grille de criteres, en fonc- 
tion des specificites du contexte dans lequel il travaille et des caracteristi- 
ques de ses personas. Quelques references font toutefois consensus et 
permettent de partir sur une base solide. Le tableau ci-dessous recapitule 
celles que nous privilegions dans le contexte d'une pratique francaise de 
l'ergonomie web. 



Methode Regie d'ergonomie versus 
Solution d'interface 

Les regies d'ergonomie servent surtout a com- 
prendre ce dont les internautes ont besoin et ce 
qui les penalise. Ce sont des objectifs, des ideaux. 
En face, sur les sites web, il existe de multiples 
facons de les atteindre aussi bien que de les rater. 
Plusieurs solutions d'interface peuvent done etre 
equivalentes ou tres proches sur le plan ergono- 
mique. C'est pourquoi les normes d'ergonomie qui 
donnent, a une problematique donnee, une solu- 
tion d'interface sont dangereuses. 



Tableau 6-2 Differentes normes et criteres en ergonomie web 
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Criteres ergonomiques de Bas- 
tien et Scapin 


1 8 criteres repartis en 8 dimensions, crees en 1 993 pour 
juger de l'ergonomie des interfaces homme-machine. 


Heuristiques d'lnstone 


Adaptation des heuristiques de Nielsen pour juger de 
I'utilisabilite d'un site web. 


Bruce Tognazzini 


16 grands principes du design d'interaction, proposes en 
2003. 
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Vous pouvez ajouter a ces references les 12 regies que nous avons presen- 
tees au chapitre precedent. Elles sont issues de notre pratique de l'ergo- 
nomie web a travers l'utilisation quotidienne de ces references, la mise 
en ceuvre d'audits ou d'analyses concurrentielles, et l'observation d'inter- 
nautes lors de tests utilisateurs. 



Structurer 1 'etude selon vos besoins 

Au-dela d'une liste de regies generiques, vous devez adapter votre audit 
en fonction des caracteristiques precises de l'interface evaluee et des 
internautes qui sont censes l'utiliser. 

Les personas ponderent les regies generiques 

Tout d'abord, les caracteristiques et besoins de vos utilisateurs influen- 
cent enormement les regies generiques. Bien sur, il existe des regies vala- 
bles pour tous les internautes : ce sont celles que Ton a evoquees au 
chapitre precedent. Cependant, rappelez-vous toujours que la derniere 
regie est Satisfaire votre internaute : elle peut passer avant toutes les 
autres et inflechir votre travail de maniere considerable. 

L'objectif d'un audit parle d'ailleurs de lui-meme : vous analysez un site pour 
evaluer s'il repond aux besoins de vos personas. Ce sont done ces derniers 
qui doivent vous guider sur les points a controler en priorite ; ce sont eux 
aussi qui vous donneront le niveau d'exigence auquel vous devez satisfaire. 
Ainsi, repondre a la regie n° 12 va souvent vous amener a ponderer de 
maniere plus ou moins forte certaines regies deja valables pour la population 
generale. Pour que vous puissiez mieux apprecier l'etendue de ces impacts, 
prenons deux exemples d'adaptation des regies en fonction des caracteristi- 
ques d'un persona. Notez que cette ponderation vaut aussi bien dans le cadre 
de l'audit, e'est-a-dire en evaluation, que dans le cadre de la conception. 

L'exemple de F expert 

Dans le cas ou votre persona primaire est un expert, votre audit devra 
etre tourne vers la satisfaction de criteres qui lui sont propres. Ainsi, il 
vous semblera plus important que l'interface lui permette d'accomplir 
ses missions rapidement, quitte a ce qu'il metre plus de temps a se 
l'approprier lors de ses premieres utilisations. Vous allez done fabriquer des 
modes d'interaction pour satisfaire cet aspect. Ainsi, vous pourrez donner 
plus de poids a la regie n° 9, au detriment sans doute de la n° 2. D'autres 
adaptations vous permettront d'atteindre l'equilibre qui conviendra le 
mieux a votre persona expert : 
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Tableau 6-3 Exemple de ponderation des regies pour un persona expert 



Regies initiales 



N° 9 : Rapidite. Importance + 



N° 2 : Organisation visuelle (et plus particulierement eviter le trop-plein d'informations). Importance ■ 



En resume, vous acceptez que la charge informationnelle de votre page soit tres importante pour privilegier le critere d'efficience. 



Un exemple : le cas « formulaire » 

Vous pouvez davantage vous permettre, avec une population d'experts, de proposer un formulaire a premiere vue indigeste car tres lourd en nom- 

bre d'informations a renseigner. Vous procederez de cette maniere si cela vient satisfaire le critere d'efficience, que vous essayez de monter a 

1 50 % au vu des caracteristiques de votre cible. 

Le formulaire en une seule page aura cet avantage pour les experts de : 

. Pouvoir etre rempli plus rapidement (ils n'ont pas besoin de passer d'une page a I'autre pour la saisie). 

. Faciliter le controle des elements saisis en une seule fois (pour verifier qu'ils ne se sont pas trompes dans les donnees entrees, un seul balayage 

visuel est necessaire). 

. Faciliter les activites de comparaison mentale (du fait que les donnees soient toutes sur la meme page). 

Ces 3 points auront pour effet d'augmenter I'efficience des experts utilisant ce type de formulaire. Vous atteignez done votre objectif, en cedant 

quelque peu sur le trop-plein d'informations, afin de favoriser la rapidite et I'efficience dans I'execution de taches expertes. 



L' exemple du senior 

Prenons un deuxieme exemple de ponderation des regies generiques en 
fonction des caracteristiques d'un persona. Si votre persona primaire a 
67 ans, il aura des besoins particuliers que vous devrez satisfaire. Ces exi- 
gences peuvent vous amener a ponderer les regies generates de la maniere 
suivante. Notez que cette ponderation vaut aussi bien dans le cadre de 
l'audit, e'est-a-dire en evaluation, que dans le cadre de la conception. 

Tableau 6-4 Exemple de ponderation des regies pour un persona senior 



Constats et besoins specifiques des seniors 


Ponderation des regies et recommandations afferentes 


Difficultes reelles de lecture des polices de petite taille. 
Insatisfaction subjective sur les sites web aux polices 
reduites. 


N° 1 1 : Accessibility (et plus particulierement accessibility visuelle) 

Importance + 

On fournit une police de taille confortable, tout au long du site. 

On fournit un moyen explicite d'augmenter ou de reduire la taille du texte. 


Difficultes de perception des couleurs. 
Les performances de lecture des seniors sur le Web sont 
affectees par les contrastes de couleurs fond/caracteres. 
Plus specifiquement, on constate souvent des atteintes 
de perception du bleu et du vert. 


N° 1 1 : Accessibility (et plus particulierement accessibility visuelle) 
Importance + 

Le fond du site est blanc, les caracteres fonces. 

Tous les contrastes des elements textuels respectent les normes d'accessibilite des WCAG 
{Web Content Accessibility Guidelines) edictees par le W3C. Notamment les diffe- 
rences de couleurs sont suffisantes pour assurer la lisibilite des caracteres sur le fond. 
Le seuil de 400 est largement depasse pour les elements de navigation et de description 
des produits (on essaie au maximum d'atteindre 500). Lorsqu'on n'atteint pas ce seuil, 
mais que Ton s'en approche, les elements typographiques sont passes en gras ou ecrits 
plus gras. 

Aucun texte n'est ecrit en bleu ou en vert. 

On choisit de differencier les liens par un format qui ne recourt pas a la couleur 
(par exemple le soulignement). 
Le site est comprehensible et utilisable sans perception des couleurs. 
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Tableau 6-4 Exemple de ponderation des regies pour un persona senior (suite) 



Constats et besoins specifiques des seniors 


Ponderation des regies et recommandations afferentes 


Des difficultes avec les elements d'interface de type lis- 
tes deroulantes. 


N° 7 Assistance (et plus particulierement visibilite) et n° 10 : Liberte 

Importance + 

Preferer des interfaces de selection affichant I'ensemble des options. 

Aucun element n'est « cache » dans une liste deroulante. 

La selection de chacun des elements dans des fiches produits se fait uniquement par 

simple die. 


Des difficultes a reperer les espaces de navigation, a 
mettre en correspondance des navigations primaires et 
secondaires. 


N° 7 : Assistance et n° 5 : Information 

Importance + 

Tous les espaces de navigation sont concentres a un seul endroit, en haut et au centre 

de I'interface. lis deviennent le repere unique de I'internaute pour se deplacer dans le 

site. 

Un bouton de la barre de navigation principale est explicitement nomme Accueil. On 

explique en premiere page que Ton se trouve sur I'accueil. 


Un niveau d'expertise web peu eleve. 


N° 7 Assistance, n° 5 : Information, n° 6 : Comprehension et n° 10 : Liberte 
Importance + 

Un guidage de I'internaute tout au long du site. Par exemple, dans une page produit, 
decoupage du processus de selection du produit en plusieurs etapes. 
Des feedbacks explicites et tres visibles, necessitant si besoin I'acquittement de I'inter- 
naute (par exemple suite a I'ajout d'un article au panier). 

On utilise le plus possible un langage detoume de la technique et on ne se base pas sur 
les connaissances de la population Internet generale. 

On limite au maximum les interfaces basees sur des mecanismes de survol. On privilegie 
les interactions simples, a base de dies. 


Un equipement informatique specifique, pas forcement 
ancien mais dont la configuration peut etre differente 
des taux de penetration de la population generale. 
Par exemple, le 800 x 600 peut etre un choix (permet- 
tant d'afficher les caracteres plus gros a I'ecran, meme 
si I'ecran gere des resolutions plus elevees), ainsi que 
I'absence de plug-in flash (a cause de la peur d'installer 
des logiciels sur I'ordinateur et de la faible probability 
de visite de sites en flash, qui pourraient proposer de 
telecharger le plug-in). 


N° 1 1 : Accessibility (et plus particulierement accessibility technologique) 

Importance + 

On limite I'espace ecran disponible en largeur a 780 pixels. 

On limite le recours a certains plug-ins ou elements complementaires aux configurations 

par defaut des ordinateurs et navigateurs grand public. 


Une tendance marquee des seniors a se « perdre » vir- 
tuellement, avec des difficultes a se reperer dans un site 
apres quelques dies. 


N° 7 : Assistance et n° 5 : Information 

Importance + 

Un indicateur de situation dans le site est present en permanence. II est fortement mis 

en avant d'un point de vue visuel, et toujours lie a la barre de navigation principale. II 

permet a la fois de se reperer et de naviguer. 


Des difficultes a effectuer une visee precise avec la sou- 
ris. 


Hors parcours : la loi de Fitts (considered independamment des problematiques de rapi- 

dite de la regie n° 9). 

Importance + 

Les boutons et liens sont plus gros et on prevoit une surface cliquable etendue autour 

des liens texte, ainsi que des boutons facilement cliquables. 
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Tableau 6-4 Exemple de ponderation des regies pour un persona senior (suite) 



Constats et besoins specifiques des seniors 


Ponderation des regies et recommandations afferentes 


Des difficultes a discriminer les elements diquables. 


N° 7 : Assistance (et plus particulierement la notion d'affordances) 
Importance + 

On prevoit des etats survoles pour tous les elements diquables (liens, barre de naviga- 
tion, boutons d'action, elements de configuration des articles pour la commande). 
Les liens hypertextes sont reperables par leur format souligne. 
Lorsqu'un element est indisponible (par exemple: le bouton Ajouter au panier lors- 
que la taille n'est pas renseignee), il prend un format inactif. Au survol et au die, on 
explique a I'internaute pourquoi il ne peut pas cliquer sur ce bouton et quelles actions 
effectuer pour le rendre actif. 


Une tendance a lire I'integralite des pages web. 


N° 2 : Organisation visuelle (et plus particulierement charge informationnelle) 

Importance + 

On evite de surcharger les pages avec des elements optionnels. 

Les elements phares des descriptifs sont formates en gras, le cross-selling se fait dans un 

format texte, sans augmenter la charge informationnelle avec des photos supplementai- 

res. 


Une tendance a ne pas cliquer sur les accroches sous 
forme d'image. 


N° 7 : Assistance 

Importance + 

On double les accroches image non explicites par des liens textuels avec des libelles 

orientes action (par exemple, formules a I'infinitif). 



Si vous pretez attention aux regies qui ont ete ponderees lors de cette 
analyse, vous vous rendez compte que les exigences d'un persona en par- 
ticulier orientent quelques regies de maniere privilegiee. Ici par exemple, 
le persona senior a particulierement besoin que Ton augmente l'impor- 
tance des regies n° 2 (Organisation visuelle), n° 5 (Information), n° 6 
(Comprehension), n° 7 (Assistance), n° 10 (Liberte) et n° 11 (Accessibi- 
lite). Et, bien entendu, la regie n° 12 vient surplomber toutes celles-la, 
puisque e'est elle qui sous-tend la necessite de la ponderation. 

D'apres ces deux exemples, on comprend que des besoins aussi specifiques 
doivent etre definis le plus tot possible dans le projet et servir de base a 
chaque decision concernant l'interface. La qualite ergonomique represente 
done l'objectif general : pour l'atteindre, vous mettrez en oeuvre des 
moyens differents en fonction des caracteristiques de votre cible. 

Pensez a controler regulierement que vous ne vous eloignez pas de vos 
contraintes initiales. II est en effet tees courant de devier et d'accepter 
des adaptations a mesure que Ton se confronte aux realites du projet. 

Les technologies vous mettent la puce a l'oreille 

Les personas ne sont pas les seuls criteres qui vous permettent de pon- 
derer l'importance des regies generiques. Ainsi, en fonction du type 
d'interface que vous analysez, certains elements vous paraitront plus ou 
moins critiques. C'est avec l'habitude, et la confrontation a de nombreux 
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Definition Ajax ? Quesaco 



Ajax est un acronyme pour Asynchronous 
Javascript And Xml. II se refere a I'utilisation de 
plusieurs techniques croisees et, principalement, 
de I'objet XMLHttpRequest, permettant de 
faire des allers-retours serveur en temps reel. 
Cette technologie permet de recharger des por- 
tions de pages sans avoir besoin de recharger la 
page en entier. Elle ouvre done des perspectives 
d'interaction beaucoup plus larges que la simple 
application de principes HTML. 
Jesse James Garrett, expert de I'utilisabilite web, 
popularise ce terme en 2005 avec son fameux 
article : Ajax: A New Approach to Web Applications. 



sites, que vous remarquerez la recurrence de certains types de defauts, 
precisement sur certains types de sites. 

Nous avons evoque dans le second chapitre l'absence de relation entre le 
recours a une technologie et la qualite ergonomique de l'interface qui en 
resulte. Cependant, les technologies vont influencer les defauts observes. 
Par exemple, il se trouve que les sites concus en Flash partagent frequem- 
ment les memes imperfections ; on retrouve par ailleurs davantage ce type 
de defauts sur des sites en Flash que sur des sites en HTML. Idem pour 
I'utilisation de la technologie Ajax : vous devez savoir que, si le site que 
vous avez sous les yeux utilise cette technologie, vous devrez preter atten- 
tion a quelques points-cles qui pechent souvent sur les sites en Ajax. Ces 
points-cles permettent de repondre aux criteres generaux evoques au cha- 
pitre precedent ou de les mettre en defaut. Au fur et a mesure, vous dispo- 
serez done d'un panel mental (que vous pouvez formaliser sous forme 
ecrite), d'un filtre vous permettant d'analyser une interface selon sa nature. 

L'exemple d'Ajax & Javascript 

Si vous savez que votre site utilise de l'Ajax, il est probable qu'il recoure a 
quelques modes d'interaction communs a la plupart des sites reposant 
sur cette technologie (notez que certaines de ces remarques s'appliquent 
aussi a des interfaces uniquement basees sur du Javascript). Vous serez 
done amene a surveiller tout particulierement certains points connus 
pour etre critiques sur ce type de site. Void trois utilisations tees cou- 
rantes d'Ajax et quelques conseils pour reperer et resoudre les defauts les 
plus frequemment rencontres dans ce cadre. 

La modification partielle de page 

Puisque la technologie Ajax permet de faire des modifications dans une 
page sans completement la recharger, vous devez veiller a ce que vos 
internautes voient ces modifications. Autrement dit, vous devez leur 
montrer qu'il s'est passe quelque chose, via un feedback immediat appro- 
prie. Plusieurs dimensions permettent de nourrir ce feedback : 
• La proximite visuelle : plus la distance entre I'objet modifie et I'objet 
declencheur de cette modification est faible, plus le feedback est 
important. Par exemple, la notion de proximite visuelle dans une inter- 
face de slide (ou un element vient remplacer un autre par glissement), 
rend d'autant plus evidente la modification qui a eu lieu dans la page : 



Figure 6-1 

Le changement de I'image dans une interface 
de slide est un parfait feedback a la modifica- 
tion partielle de la page. 
Source : fr.news.yahoo.com 
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Notez que cette necessite de proximite visuelle peut largement 
influencer la conception dune interface. Comparez, par exemple, la 
difference de visibilite de la confirmation, lors de l'ajout d'un element 
au panier, sur ces deux sites : sur le site de Promod, le resume du 
panier est plus eloigne du bouton Ajouter au panier que sur le site de 
Reservoir Jeux. 
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Figure 6-2 

Sur le site de Promod, le resume du panier 

est eloigne du bouton Ajouter a mon panier. 

Source : www.promod.fr 
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Figure 6-3 

Sur le site de Reservoir Jeux, le resume 
du panier est plus proche du bouton 
Ajouter au panier. 
Source : www.reservoir-jeux.com 



Ajuster finement la proximite visuelle du feedback est plus aise lorsque 
vos boutons d' action ont toujours le meme emplacement quelle que 
soit la page (c'est par exemple le cas des nches produit de Reservoir 
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VOCABULAIRE Div ? 



En termes strictement techniques, la balise div 
permet de regrouper des objets afin de leur attri- 
buer une mise en forme commune. Dans le 
domaine de I'utilisabilite, on utilise ce terme de 
maniere etendue pour figurer une zone de con- 
tenus venant se superposer sur la page existante 
grace aux CSS. Cette expression nous permet 
notamment de differencier I'affichage sous forme 
de div de I'affichage sous forme de pop-up ou de 
fenetre d'alerte Javascript. 



Jeux, mais pas de celles des 3 Suisses). Cependant, on peut faciliter la 
proximite visuelle d'un tel feedback en utilisant un affichage sous 
forme de div, qui apparaitra exactement au meme endroit ou que se 
trouve le bouton Ajouter au panier (notamment en cas de scroll). 

• Le format visuel : le changement de format visuel est un indice tres 
important pour representer le fait que la page a change. Gardez a 
l'esprit qu'il n'est pas necessairement permanent ; vous pouvez tout a 
fait mettre en place des techniques de feedback temporaire, permet- 
tant a certains elements de prendre une apparence donnee pendant 
une duree limitee. Par exemple, vous pouvez surligner un element 
juste apres sa modification ou son apparition (dans le cas d'un mes- 
sage), puis faire disparaitre cette mise en avant au bout de 5 secondes. 

• La representation du caractere dynamique d'un processus de charge- 
ment, qui renvoie a la notion de latence simulee (voir page suivante). 

Attention a bien tenir compte des interactions qui se produisent entre la 
proximite visuelle, le format visuel et la representation du caractere 
dynamique : si Fun est tres fort, il devient d'autant moins important que 
les deux autres le soient. 

Par exemple, lorsque la forme de l'objet qui vient remplacer le precedent 
est tres differente, et que l'element d'action en est tres proche, le feed- 
back est contenu dans l'effet meme de l'actualisation de la page. II est 
alors largement suffisant. C'est souvent ce que Ton observe dans les 
interfaces de slide, telles que la suivante : 



Figure 6-4 

Dans cette interface de slide, les composantes de 

forme et de proximite visuelle interagissent pour 

creer un feedback fort d'un point de vue visuel. 

Source : www.because.tv 
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Dans le meme ordre d'idees, regardez cet exemple sur le site de la Fran- 
caise des Jeux. Lorsque Ton consulte les resultats du Loto en ligne, on 
peut regarder les tirages dans l'ordre de sortie ou dans l'ordre croissant. 
Par defaut, les numeros sont presentes dans l'ordre du tirage et l'utilisa- 
teur peut cliquer sur le bouton Voir ordre croissant pour modifier cette 
presentation. On utilise en fait un bouton binaire, qui se transforme 
selon l'ordre consulte par l'internaute : 



Figure 6-5 

Au vu de la grande proximite visuelle du bouton et du tirage, le chan- 
gement d'ordre des numeros et le changement de libelle du bouton 
sont suffisants pour servir de feedback a Taction de l'internaute. 

Source : www.loto.fr 




29 31 30 17 10 41 

ILUIUMUilLliUJJJ^ 
10 17 29 30 31 41 |43 




238 



Aller PLUS LOIN La justification de la latence simulee 

Comme il existe une grande difference entre une inter- 
face en HTML classique et une interface plus dyna- 
mique (par exemple en Ajax, mais aussi en Flash), vous 
devez adapter vos reflexes de conception. Voici, de 
maniere schematique, comment se presentent ces deux 
modeles d'interaction : 



UNE CHAE&E CO&HITMB DEPENDANTS DE LA LATENCE 




TEMPS DE LATEN£E 
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Figure 6-6 Difference de temps de latence entre des interfaces 
en HTML et en Ajax ou en Flash. 

Les temps de latence peuvent disparaitre totalement 
dans les interfaces en Ajax ou en Flash : la duree 
d'attente n'est done plus un indice signalant qu'il se 
passe quelque chose (puisqu'elle est nulle lorsque les 
temps de chargement ou de traitement sont quasi- 
immediats). Vous pouvez alors simuler I'execution d'un 
processus par le systeme afin d'attirer I'attention de 
I'internaute sur le traitement en cours, consecutif a son 
action. C'est par exemple ce qui sous-tend I'exemple 
suivant : dans le panier du site Reservoir Jeux, les inter- 
nautes peuvent augmenter ou diminuer la quantite des 
articles, ce qui a pour effet de modifier le montant total 
de chaque ligne et le prix total du panier en temps reel. 
Or, le temps de calcul de la part du systeme est si faible 
que le seul indice perceptible de la mise a jour de ces 
prix est la modification des caracteres constitutifs des 
montants. C'est un peu faible... (a vrai dire, cela peut 
meme etre pratiquement invisible en fonction des dif- 
ferences de forme entre les chiffres avant et apres 
calcul). On prevoit done un indicateur de chargement 
dynamique, qui tourne de maniere animee, comme si le 
systeme etait en train de proceder au calcul : 



M«i(wwr InltuptirMMvwfci infos Liwoison faiemefir. 



Quantiti °ml<unrif Pwbt to 



□ i;»qu.: cadim I b uh m 



i I ti fi?,5o< 67,50 C 



'j-s 



-.__ I!, I. : „l .. -. r " ■.. 



mm . ft/^0 t 



Figure 6-7 Etat initial du panier. 
Source : www.reservoir-jeux.com 
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Figure 6-8 Simulation de latence suite au changement de quantite. 
Source : www.reservoir-jeux.com 
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Figure 6-9 Etat final du panier. 
Source : www.reservoir-jeux.com 

C'est ce que Ton appelle de la simulation de latence. Sur 
le plan strictement technique, on n'en a absolument 
pas besoin mais, en termes de perception utilisateur, 
c'est necessaire pour que I'internaute comprenne ce 
qui s'est passe et soit oriente vers la consequence de 
son action. Notez que ce procede permet aussi d'attirer 
I'attention visuelle directement sur I'objet touche par 
Taction de I'internaute. 
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A SAVOIR D'autres liens intra-page 

Les liens plier/deplier ne sont pas les seuls a 
appartenir a la classe des liens intra-page. Pensez 
ainsi aux liens ancres, tres utilises dans le cadre de 
sommaires diquables : cliquer sur une des lignes 
du sommaire permet de descendre dans la page a 
I'endroit correspondant. 



Figure 6-10 

Les liens Options, Voir les articles 

et Voir tous les auteurs indiquent a I'inter- 

naute qu'ils sont diquables et declenchent 

I'affichage de nouvelles donnees. 

Sources : www.blogger.fr / 

www.reservoir-jeux.com / www.lamy.fr 



Le plie/deplie d'informations 

En utilisant Ajax ou Javascript, vous pouvez permettre a l'internaute 
d'afficher certaines informations dans la page existante, grace a un sys- 
teme d'affichage a la demande, que nous nommerons plier/deplier. Nous 
avons done affaire a des liens ayant un impact a l'interieur de la page 
consultee. lis sont appeles des liens intra-page. 

Ce precede est le second type d'utilisation d'Ajax ou JavaScript le plus 
frequemment rencontre. II n'est qu'une instanciation de la modification 
partielle de page mais il a des implications bien particulieres. Ainsi, 
lorsque vous utilisez des interfaces de plier/deplier, vous devez penser a 
mettre en place tous les elements suivants et ce, de maniere appropriee : 
• Indiquer qu'une action est possible 

Cette indication passe principalement par l'affordance d'un element 
cense appeler l'internaute en lui disant : « Si tu cliques sur moi, il va 
se passer quelque chose ». Elle est aussi facilitee par le nom du lien ou 
du bouton permettant d'afficher les informations supplementaires : 



: 



VuLi e [Jdiiiei LimLieiiL 2 j i tiU ei 
4- Voir las articles " 



' Les auteurs 



luus. Id direi-tiiji i Jt: CdiiriHt: Gud^Lfuen cl Cd 

■.I alu'dlij i J? LdurtfiiLtf 'ieLiijiri. 



■ tinjiJruuA , oveL Id 
' - Voir tous lea auteu 



Point de vue utilisateur Pour un internaute, un 

lien intra-page est moins dangereux 

qu'un lien inter-pages 

Sachez que les internautes sont moins frileux a 
I'idee de cliquer sur un lien lorsqu'ils savent qu'ils 
ne vont pas changer de page, car ils considerent 
que Taction est moins risquee. En outre, lorsque ce 
mecanisme d'interaction est bien adapte a la 
tache, ils montrent souvent une tres bonne appre- 
ciation subjective de ce type de lien, qui semble 
alors facile. 



Indiquer que le lien intra-page est different d'un lien hypertexte 
classique permettant de passer de page en page. Le libelle du lien en 
est deja un indice (par exemple, Masquer indice plus un lien intra-page 
que Details - notez d'ailleurs que l'emploi d'un verbe a son impor- 
tance). C'est cependant essentiellement l'ajout d'un element typo- 
graphique ou graphique qui vous aidera a souligner le caractere intra- 
page du lien. Grace a une fleche, un +, etc., l'internaute est capable 
de deviner si un lien va l'emmener sur une autre page ou simplement 
afficher de nouveaux elements dans la page en cours. 



• afficher detail t 

• voir supports ► 



Cosma Terra Top AFF 
http' : //vnwfccosm aterra .f r 



Points-cles du sommaire 



' voir tout le sommaire 



Figure 6-11 

Les elements typographiques et graphiques 
adjoints aux liens intra-page informent l'inter- 
naute sur leur action a l'interieur de la page. 
Sources : www.affilies.biz / www.dalian.fr 
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. Les moyens d'inyestigation de Ta d m i n i strati o n 

. Les consequences du controle fiscal 

. La periode pre-contentieuse 

. Les recours contentieuw 

. Les recours en droit international 

. Formulaires etmodeles de lettres 

. Les autres modes de reglementdes litiges 

. Guide d'auditdes procedures fiscales 
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Differencier les liens classiques des liens intra-page est surtout inte- 
ressant si vous utilisez ce mecanisme d'affichage de maniere recur- 
rente dans votre site. Les internautes pourront ainsi apprendre 
progressivement que les deux formats representent deux types de 
liens differents. 

Fournir ou non un moyen de revenir a l'interface initiale. En fonc- 
tion de l'interet que l'internaute a a revenir en arriere, vous allez 
decider de fournir ou non un moyen d'annuler le clic. Vous devrez 
alors trouver la meilleure designation possible pour retourner a 
l'interface initiale. Qyelques conventions commencent a se se 
degager et on retrouve souvent les memes termes. Bien que tout reste 
a inventer dans ce domaine, on essaie d'utiliser des mots que les 
internautes connaissent deja (par exemple, le terme Fermer). Le 
mecanisme de retour peut aussi consister a utiliser uniquement un 
element graphique inverse du premier (dans le cas d'un code +/- ou 
d'une fleche orientee dans le sens du plie/deplie) : 



i 



Votre panier cantient 2 articles 
■f Masquer + + 



Article 
C:uedo DVD 



Qte Prix 

2 L35 r 00 € ffl 



Total: 135,00€ 



Passer votre comma nde 



Vaus pourrez encorE modifier 

les articles de votre comma nde et 

les options de livraison. 



J 



vos risuUats 



/nR/?fJ07 an 7tl/lin/70D7 



• dlTfiLlier de Ldil t 
■ voir supports ► 



* df fiLlier de ldil * 



brand Bae Armagnac M ... „,,„ Mi „ , ,.,„. Hl , ... r^hul": 7n/nnf?m7 tin , rr1r 

U.Ub euro/die 4- 12^/n du t_A ... .,.,.,.,„.., Inscnt 



Art Pt I i.n^M.ii 
http://iwjw. a rfclri i !■;■ 



7"Wi riu tjl ht 



Dgbut: os/00/2007 

Fin: ^]/]7/7n."5n 



Preaeiildliuii de Id idrnpdujne 

HOM DU PROGRAMME ; drteti.uibbuii.fr 

DESCR1PTTF ; Art & Cuibbuu uruuube deb usleriiilei de misine lid 
■jdiiiiiie de ijrdiideb iiidrijueb diriii nut: de^i di LiUeb de deLuidtiun [juui I'u 



Arl a Cuis 



.eiiLe un Ldtdluijue d"un |jt:u u<lub de 550 reiei ei iLtrs- Ydiieeb 
Envii lfii 3 fuii [ui inuti de nuuvelleb uuei dLiijni iiidtkeLiiiLf bunL ntibeb en u'di 
duluui de dl r t ■ t: 1 1 L b- r uuijuleb : 

- C'ltuut: ttt Jw wt d ufhii [ de 10 d 200 euitn > 

- Libit: de indiidye [ LjedLiuii eL emibbiuii de Id libit: vid le njruuLt: V 

- QlTie de udiidiridije f 3 eurub uuur le udridiii ] 

- Cuupuiii de i edu-Llim i 

Grntuibc des frois- de port a partirde 150 cures d 'achat 

Possibilite de regler sea achats en plusieurs foia 
Notre dele*rni notion et notre oyrarrisnt zc-ni la cle de notre aucce 
partageons le ensemble en deven-nrit affilie Art B. Cuiaaon 1 

POINTS TORTS : Le panier moyen est paaae de 00 a 120 euros en C moia. 
Des prix parmis les plus bos du m-arche 

REMUNERATION ; 7% Ju CA I IT 



Vous ctcs inscrit depuis le 16/00/2007 
* Lire lc-5 Conditions General cs. 



* Se debiiibciiii^! 



Supports} dispomble(sJ : 
Produits (1) 



t&) , Flash f.2) , Catalogue 



• afftcher detail W 

• voir supports ► 



BetCh. 



HPtrllr : .i'-inir 



SO euros par depot 



DcIjuL: 02/00/2007 



• a ffichcr detail ^ 

* voir supports ► 



V :.■!! hil..: 

htt p : // www. y a uj o b . co m 



1,3 euro par inscription ct 2,5Dcbut: 27/07/2007 
curu (irisuril + CV depoac) Fin: 27/07/2050 



o^lLlkCmiiiuT 




a 




D 


D 


a 


Q.DOf 


D.ODE 


o,cc 


KOOKTT» 




::> 




1) 


a 


i) 


0.41] t 


D.CMt t 


O.IS 


He iis-wdy V 









D 


a 


i 


flMt 


D.XE 


o.x 


t'ri'i'H rii;h'r T 










1 


D 





O.ODE 


DLQDe 


O.DQ 


VedkHflisv 







« 





2 





O.CO€ 


B.«>C 


1.M 




1 ntail : 





9 


1 


i 


i 


12.93 C 


0.3&C 


O.TS 





Figure 6-12 

Les mots Masquer, Fermer et la fleche 
orientee vers le haut permettent 
de revenir a l'interface initiale. 
Sources : www.reservoir-jeux.com / 
www.affilies.biz 
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Le drag & drop 

Avant meme de commencer a evaluer l'utilisabilite du drag & drop, vous 
devez vous interroger sur l'utilite de ce mode d'interaction dans le con- 
texte ou il est implante. 

Commencons par cet exemple sur le site de Free, qui propose a ses inter- 
nautes de telecharger les manuels d'aide via une interface de drag & drop. 
Si Ton se base sur les caracteristiques de la tache, on se rend vite compte 
que l'interaction par drag &drop n'est aucunement justifiee : 



Figure 6-13 

Le telechargement de manuels d'aide sur le 

site de Free se fait par drag & drop. 

Source : www.free.fr 



Configuration 


Documentation 




MANUEL FREEBOX 

AD5LTELEPHONE.TY V3 /V4 



Glisser le Dossier ici fc ^" - 
TELECHARGER ^** 

Pourtelecharger, faites glisser les dossiers sur la zone 

clignotante, le telechargement debute automatiquement. 

Pour Telecharger avec une navigation classique clique* ici. 



MANUEL FREEBOX 

VI IY1 







Point de vue utilisateur 
La gestion du risque par I'immobilite 

Vous devez savoir que les internautes a qui Ton 
propose une solution de contournement hesitent 
souvent a I'utiliser, avec un raisonnement de type 
« Si je clique sur ce lien, que va-t-il encore 
m'arriver ? Est-ce que je ne vais pas me retrouver 
avec une interface plus compliquee ? ». 
Se cantonner a une interface qui ne nous satisfait 
pas, mais qui est directement disponible et connue 
(puisqu'on I'a sous les yeux) est un comportement 
frequemment observe. 



En voulant creer un moyen d'interaction original (plutot qu'utiliser de 
simples liens ou boutons de telechargement), on augmente la charge de 
travail de l'internaute. Ce dernier doit d'abord comprendre le fonction- 
nement de l'interface en analysant la page et en lisant la legende (alors 
qu'avec une interface plus conventionnelle, 1'utilisation devient de l'ordre 
du reflexe). II doit en outre proceder au drag &drop, ce qui n'est pas 
forcement evident pour tous les internautes et necessite plus d'actions 
qu'un simple clic. Que de complexite pour une action qui pourrait se 
resumer a un clic sur un lien ! 

La page fournit d'ailleurs un moyen de revenir a une interface plus rai- 
sonnee, proposant un clic de telechargement pour chaque manuel. 
Cependant, cette fonctionnalite ne doit etre utilisee par personne 
puisque l'interface de drag & drop est celle par defaut : l'internaute doit 
done d'abord avoir identifie qu'il lui est possible de changer d'interface. 
En outre, ce changement implique un effort et un risque (voir la 
remarque ci-contre). 

Pour terminer sur cette illustration, lorsque vous utilisez un mecanisme 
de drag & drop, sans que ce dernier soit reellement utile, exploitez-en au 
moins tous les avantages. Ici par exemple, il ne permet pas de faire de la 
multi-selection, alors que e'est une des justifications majeures pour 
recourir au drag & drop. 
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En general, ce fonctionnement est plus utile dans des interfaces expertes 
(rappelons que l'expertise au sens large peut venir de la grande frequence 
d'utilisation d'un systeme) et plutot de type applicatives. Le drag & drop 
n'est pas encore entre dans les mceurs des sites web grand public. 

Si vous le fournissez comme un « gadget », il faudra alors que le cout en 
soit minime pour les internautes qui ne l'utiliseront pas. A ce propos, sur 
le site de Virgin Mega, l'ajout au panier peut se faire de maniere clas- 
sique, mais aussi en drag & drop. II est dans ce second cas plus com- 
plique en termes d'interaction, mais potentiellement plus satisfaisant en 
termes d'experience utilisateur grace au cote sexy du drag & drop et a 
l'implication de l'utilisateur dans Faction : 



i 



@ virginmega.fr 



LKlWMIjJ 



«»£■ 

NEWSLETTER ■ 



.'.:cjeil 
nellejreshhes 



3RLE17ERIE PMTQ PPESSS 
MR PRttSULL AUTRPflllOOflHS SERVICES 



GlHSCRIVEITOUS 





Figure 6-14 

L'ajout d'un article au panier sur le site de 
Virgin Mega peut se faire par drag & drop. 
Source : www.virginmega.fr 



Dans cet exemple, ce n'est pas parce que le site offre cette possibilite 
qu'il charge l'interface de maniere excessive pour les internautes qui ne 
l'utiliseraient pas. Le seul element qui s'ajoute, c'est l'indicateur de saisie 
au survol de la souris. 

Cette conclusion sur la necessite d'analyser l'utilite du drag & drop nous 
offre une belle transition : la presence de cet indicateur est en effet le 
premier point a evaluer concernant l'utilisabilite du mecanisme. Le 
drag & drop doit necessairement avoir des impacts au niveau de l'inter- 
face afin de ne pas rester opaque pour l'internaute. Ainsi, voila la liste 
des elements a surveiller : 

• Tout d'abord, est-ce que l'interface represente bien l'idee que certains 
elements sont « deplacables » ? On peut donner cette information a 
l'internaute grace a un mot (par exemple, Deplacer sur l'exemple sui- 
vant) et a un symbole (une croix de saisie, une main de saisie, etc.). 

• Ensuite, est-ce que l'interface illustre bien que les elements deplacables 
ont une destination? Ou plutot, quelle peut etre cette destination ? 
Attention : ceci doit etre evalue dans l'interface nominale, puis en 
cours d'interaction. Plus le drag & drop sera Justine, plus vos internautes 
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pourront reperer facilement le ou les endroits ou ils peuvent deposer 
les elements saisis. Vous devez representer la destination a deux 
moments cles : 



Figure 6-15 

Virgin Mega, Free et Alapage utilisent sensi- 

blement le meme symbole pour representer la 

possibility de drag & drop, soit au survol de la 

souris (pour les deux premiers), soit de 

maniere permanente pour tous les elements 

(pour Alapage). Source : www.virginmega.fr / 

www.free.fr / www.alapage.com 
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Figure 6-17 Vindication de la destination sur 

le site de Netvibes est particulierement 

efficace : on voit tres bien oil peut etre depose 

I'objet que Ton deplace, et comment 

il va s'integrer au reste de la page. 

Source : www.netvibes.com 



1 Avant la saisie. Le plus difficile est de montrer cette destination 
lorsque les internautes n'ont pas encore saisi l'element a deplacer. 
Soit vous indicez la destination uniquement d'un point de vue gra- 
phique, soit vous y ajoutez un message textuel qui peut, en outre, etre 
anime comme sur le site de Free : 



Figure 6-16 

On indique explicitement aux 

internautes ou deposer leur dossier 

grace a un message clignotant. 

Source : www.free.fr 




Glisser le Dossier ici 
TELECHARGER 



Pourtelecharger, faites glisser les dossiers sur la zone 

clignotante, le telechargement debute automatiquement. 

Pour Telechargeravec une navigation classique cliquezici. 



On peut aussi s'aider d'une legende. Ainsi, toujours sur le site de Free, on 
indique aux internautes : Pour telecharger, faites glisser les dossiers sur la 
zone clignotante, le telechargement debute automatiquement. 

2 Au survol de la destination. Vous devez adopter un code particulier 
lorsque les internautes survolent l'endroit ou ils peuvent deposer leur 
objet. Ainsi, ils seront beaucoup plus confiants pour le lacher. 

• Une fois que l'internaute a saisi un objet et le glisse vers une destina- 
tion, vous devez verifier si l'interface illustre bien le fait que des ele- 
ments sont en train d'etre deplaces. II est essentiel, en termes de 
feedback utilisateur, que les internautes aient un retour en temps reel 
sur l'efficacite de leur action. Ainsi, ils doivent voir l'effet du moindre 
mouvement de souris sur l'interface. On peut utiliser l'un ou l'autre de 
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ces deux types de feedback : soit vous representez l'element en train 
d'etre deplace (souvent en transparence), soit vous utilisez un represen- 
tant symbolique de cet element. 
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Figure 6-18 

On voit bien que les elements sont en cours de emplacement. 
Source : www.virginmega.fr / www.free.fr 



• Enfin, est-ce que l'interface montre bien que certains elements ont 
ete deplaces ? Ici, on revient presque aux memes problematiques que 
pour le rechargement partiel de page, avec des feedback aides par la 
proximite et le format visuel. 

Le type de site et son contenu impliquent des points-cles 
a surveiller 

Les choix technologiques ne sont pas les seuls a influencer le type d'ele- 
ments controles lors d'un audit. Ainsi, le genre de site ainsi que les con- 
tenus qu'il abrite vont vous orienter vers deux dimensions : 

• Au niveau de l'utilisabilite. Par exemple, sur un site d'e-commerce, 
vous allez imperativement verifier des points primordiaux qui impac- 
tent l'utilisabilite d'un process d'achat en ligne : visibilite du bouton 
Ajouter au panier, guidage lors de l'interaction, etc. 

• Au niveau de l'utilite. Le type de site influe aussi sur l'audit de l'uti- 
lite globale et des micro-utilites du site (nous aborderons ces notions 
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en detail au chapitre suivant). Ainsi, sur un site editorial, vous allez 
juger de l'utilite de fonctionnalites avancees pour la gestion du 
contenu : imprimer, version PDF, envoyer a un ami, gestion de flux 
RSS, etc. Bien sur, vous etudierez aussi leur utilisabilite. 

Enfin, le type de contenus propose dans un site vous influence dans 
votre audit. Par exemple, si vous reperez que le site propose de la video, 
votre attention va se diriger vers les problematiques frequemment ren- 
contrees dans la gestion de la video sur le Web (plug-in utilise, declen- 
chement automatique, gestion du pre-chargement, lecture en boucle, 
indicateurs de chargement et de positionnement dans la video, utilite et 
utilisabilite des controles utilisateur, guidage post-visionnage, etc.). 

Pour resumer, en fonction du site que vous avez en face de vous, et en 
fonction des caracteristiques de ses visiteurs, vous veillerez plus particu- 
lierement a certains points-cles. Ainsi, un audit n'est jamais comparable 
a un autre. Voyons maintenant quelques conseils pour conduire cet audit 
d'un point de vue pratique. 



Conduire une analyse ergonomique 

Quelques questions reviennent frequemment lorsque Ton aborde le 
theme de l'audit ergonomique d'un site web. Nous allons passer en revue 
les plus importantes. 



Seul ou a plusieurs ? 

Tout d'abord, on peut se demander si un audit doit etre mene seul ou a 
plusieurs. Sans hesiter, on est plus fort a plusieurs. On peut etre tente de 
se dire : « il existe tant de conventions, de normes et de regies d'ergo- 
nomie qu'un seul expert devrait pouvoir recenser l'ensemble des pro- 
blemes d'une interface ». Or ce n'est pas le cas et ce n'est pas parce que 
Ton est mauvais. C'est malheureusement humain et cela porte meme un 
nom : l'effet de l'evaluateur. 



Aller PLUS LOIN L'effet de l'evaluateur sieurs evaluateurs, utilisant la meme methode, reperent 

,, rr ,,. ,,. . ,. des problemes d'erqonomie differents. Prenant en 

Leffet de I evaluateur est une problematique bien , AA ,. . .7 . 

, , , 7 , , exemple 11 etudes, lis montrent ainsi que le pourcen- 

connue et larqement abordee dans le domaine de la T, . . , . . . . r , 

3 . taqed accord moyen entre deux evaluateurs vane de 5 a 

recherche en erqonomie. rr n/ . . , .. . , , 

„ , , . . . . 65 %. Au vu de ces resultats, on comprend que le seul 

Ainsi, Hertzum & Jacobsen ont releve a plusieurs reprises . ,. . a . . . . , . ,- , 

, . , . . „„ ^ , ^ % ^ , moyen de reduire cet effet consiste a faire appel a plu- 

(voir notamment eurs ecrits de 1999 et 2001) que p u- ,, . . „- ■ ^ t 

M K sieurs auditeurs pour analyser la meme interface. 
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Cet effet necessite, pour esperer atteindre une couverture honorable des 
problemes d'ergonomie d'une interface, de ne pas travailler seul. Ainsi, 
Jakob Nielsen recommande, pour obtenir le meilleur rapport qualite/ 
prix, de faire participer 3 a 5 specialistes au meme audit. En effet, le cout 
dun audit (en temps aussi bien qu'en argent) est forcement d'autant plus 
eleve qu'il y a de participants. Si le fait de faire intervenir plusieurs eva- 
luateurs vous parait delirant et que vous craignez d'exploser votre 
budget, tenez compte du fait qu'une analyse ergonomique peut etre plus 
ou moins formelle. Ainsi, il nous parait interessant de reunir plusieurs 
evaluateurs au debut d'un audit, afin de balayer rapidement les pro- 
blemes que chacun percoit. Ensuite, une seule personne est chargee de 
realiser l'audit a proprement parler, puis le groupe se retrouve a la fin de 
l'analyse afin de valider les points abordes. De cette maniere, vous bene- 
ficiez a peu de frais de plusieurs regards sur la meme interface. C'est ce 
que Ton appelle revaluation croisee. 

D'ailleurs, sans vouloir vous decevoir, malgre tous les experts du monde 
rassembles autour d'une interface, vous trouverez toujours des choses 
inattendues en test utilisateur. Autrement dit, vous havez jamais fini 
d'analyser la qualite ergonomique d'une interface. Compte tenu du 
caractere tres vivant du Web et de ses utilisations, chacune des methodes 
devaluation ergonomique peut etre mise en ceuvre a l'infini, tout au long 
de la vie d'un site, afin de l'ameliorer de plus en plus finement. 

Vous devez bien faire la difference entre le minimum syndical de l'ergo- 
nomie et le cycle de conception ideal. Tres peu de projets sont capables 
de mettre en ceuvre des moyens suffisants pour etre surs de ce qu'ils 
avancent d'un point de vue ergonomique. Le principal reste a faire son 
possible. En effet, les premiers echelons du travail d'ergonomie ont une 
valeur inestimable : ce sont eux qui contribueront le plus a ameliorer la 
qualite d'utilisation de votre site. 



A SAVOIR L'effet de I'evaluateur 
au-dela du nombre 

II existe un interet supplemental a 1'evaluation 
croisee, qui n'est pas strictement lie a l'effet de 
I'evaluateur tel qu'on I'entend habituellement. 
C'est une consequence du caractere tres contex- 
tuel du Web, qui implique des problematiques 
d'interface mais aussi des problematiques de 
domaine. La specialisation de chacun sur telle ou 
telle interface, ou sur tel ou tel domaine (finance, 
immobilier, voyagistes, domaines culturels...) a une 
grande influence sur la qualite de l'audit realise. 
Ainsi, plusieurs evaluateurs, possedant des compe- 
tences complementaires, atteindront plus facile- 
ment un resultat complet qu'un seul evaluateur. 



Le fil rouge : dans la peau de votre persona 

Pour conduire un audit, il ne suffit pas de connaitre les regies generiques 
d'ergonomie. Ces dernieres representent le point de vue de l'expert. 
Avant tout, vous devez vous mettre dans la peau de vos personas et 
essayer de realiser chacune des missions que vous leur avez affectees. 

Sortez de vous-memes et faites en sorte de visiter le site comme si vous 
ne l'aviez jamais vu auparavant (si, bien entendu, c'est le contexte que 
vous souhaitez tester). C'est un exercice difficile car il demande de 
bonnes capacites d'abstraction de soi, de ses habitudes, de ses reflexes, de 
ses connaissances. C'est d'ailleurs un objectif impossible a atteindre dans 
l'absolu : c'est pour cela que l'ergonomie ne trouve de meilleure methode 
devaluation que celle faisant intervenir de veritables internautes. 
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La seule chose dont il ne faut pas s'abstraire, ce sont precisement les 
connaissances ergonomiques (connaissance theorique des normes et 
regies, experience, donnees et impressions tirees de l'observation d'inter- 
nautes en train de naviguer, etc.). 

Pendant le parcours, vous devez vous concentrer sur la realisation des 
taches de votre persona et analyser tout ce qui se passe a la lumiere de 
vos connaissances. Explorez l'interface au maximum ! Par exemple, si vous 
faites une commande, pensez a tester tous les cas de figure possibles. 
Effectuez une veritable commande, testez la gestion des erreurs : vous 
devez absolument vous confronter a tout ce que vos internautes verront 
(et ce, meme si vous pensez savoir comment fonctionne l'interface). 

A ce niveau, vous devez seulement faire des copies d'ecran et prendre des 
notes tres breves. II sera bien temps, par la suite, de rentrer dans des 
explications plus approfondies. Si vous commencez a justifier a chaque 
fois ce que vous observez, vous risquez de perdre le fil de votre action. 



Methodologie 
La gestion du temps lors de I'audit 

Veillez a adapter la profondeur de votre analyse au 
temps dont vous disposez. En general, avant de 
commencer un audit, vous avez deux contraintes : 
le perimetre et le temps imparti. C'est le temps qui 
determine jusqu'ou vous poussez I'audit, pour 
chaque point du perimetre. 



Par ou commencer ? 

II est souvent difficile de savoir par ou commencer un audit ergono- 
mique. Classiquement, on se retrouve face a la page d'accueil, assailli par 
un flot de defauts plus ou moins importants. II est done courant de ne 
pas savoir ou donner de la tete. Or, il est primordial de ne pas se dis- 
perser lors d'un audit ergonomique. Une des grandes qualites requises 
pour devenir un bon evaluateur est de proceder de maniere rigoureuse, 
sans devier de ses objectifs de depart. 

Sauf si vous avez des directives particulieres, adoptez la regie classique 
consistant a aller du general au particulier. Autrement dit, ne commencez 
pas par les details ! Toutefois, ne vous abstenez pas de noter des remarques 
sous pretexte que vous n'avez pas encore traite les aspects plus generaux. Si 
vous ne consignez pas tout ce qui vous interpelle sur le moment, il y a fort 
a parier que vous en oublierez la majeure partie. L'audit ergonomique est 
une activite tres gourmande en termes de ressources mentales et chaque 
observation vient rapidement balayer la precedente. 

La methodologie de I'audit est un canevas. Sachez done l'adapter a vos 
besoins. Ne pas commencer par les details revient a privilegier plutot 
une demarche generale. Dans un premier temps, on ne s'attarde pas sur 
ce qui ne gene pas la mission du persona. Ne recherchez pas sur chaque 
page parcourue tout ce qui peut clocher ou vous risquez de manquer de 
temps pour traiter les problematiques de plus haut niveau. Vous revien- 
drez ensuite sur chacune des pages pour une passe plus detaillee. 

Meme lorsque vous analysez un site dans son integralite, vous avez sou- 
vent des indices sur ce qui semble poser probleme. Soit vous avez deja 
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repere des points noirs parce que vous travaillez tous les jours sur ce site, 
soit des personnes exterieures vous apportent leur ressenti et/ou des 
retours utilisateur sur l'ergonomie du site. Vous pouvez commencer par 
analyser ces elements. Cependant, pour structurer votre analyse, res- 
pectez au moins trois etapes de travail : 

1 Evaluer si l'interface du site web traduit bien son utilite. Autrement 
dit, comprend-on rapidement ce que propose ce site et en quoi il 
peut nous aider ? Notez que c'est aussi souvent par la que Ton com- 
mence un test utilisateur (que nous aborderons au chapitre 11). 

2 Reperer les defauts inter-pages. Ce sont les problemes d'architecture de 
rinformation, de navigation, d'enchainements, d'interactions, de struc- 
turation du dialogue homme-ordinateur. Ces defauts macroscopiques 
sont les plus difficiles a reperer. D'ailleurs, ce sont aussi bien souvent les 
plus difficiles a corriger. Pour les detecter, vous devez necessairement 
realiser les parcours supposes de vos personas. C'est d'autant plus 
important que ces aspects, contrairement a certains problemes plus 
mineurs, ne sautent pas forcement aux yeux. Paradoxalement, ce sont 
cependant ceux qui risquent d'entraver la reussite de vos internautes. Ce 
sont done les defauts que vous devez detecter en premier lieu. 

3 Reperer les defauts intra-page. Dans un second temps, vous repas- 
serez par chacune des etapes de maniere plus approfondie (le degre 
d'approfondissement etant fonction du temps dont vous disposez et 
de l'importance de la page). Vous repererez alors des erreurs d'ergo- 
nomie plus ou moins graves. Nous verrons par la suite comment hie- 
rarchiser ces observations dans la restitution de votre etude. 

Vous devez concilier cette methodologie en trois temps avec d'autres 
imperatifs, notamment l'analyse obligatoire de pages-cles. Si vous devez 
evaluer integralement un site d'e-commerce, il nest en effet pas conce- 
vable de se dire : « J'ai passe 5 jours sur les defauts d'architecture et 
d'interaction et j'ai epuise mon credit-temps, done je m'arrete la ». II est 
impossible que vous n'ayez rien a dire sur la page d'accueil, une page 
produit, le panier, etc. II s'agit done de jongler des le depart entre le 
temps dont vous disposez et ce que vous vous devez d'analyser. 

Outre ces pages-cles, certaines thematiques doivent toujours etre abor- 
dees ou, en tout cas, evaluees lors d'un audit ergonomique. Autrement 
dit, vous allez systematiquement etudier certains points (sauf s'ils sortent 
de votre perimetre d'action). C'est le cas de l'adaptation des pages a une 
resolution d'ecran cible, des emplacements, apparences et comporte- 
ments des barres de navigation, de la lisibilite de la police de base, etc. 



VOCABULAIRE 
Inter-pages ? Entre deux pages ? 

Les defauts inter-pages concernent la maniere 
dont vous conduisez I'internaute a travers votre 
site. Attention : aujourd'hui, lorsqu'on parle de 
page en ergonomie, on ne fait pas forcement refe- 
rence a une page physique correspondant a une 
URL specifique, mais plutot a un ecran. Ainsi, si 
une proportion importante de la page se recharge, 
vous pouvez considerer que vous avez affaire a un 
nouvel ecran. 



Methodologie 
De I'utilite d'aborder les points positifs 

Meme si I'objectif avoue d'un audit ergonomique est 
de detecter ce qui pose probleme dans un site web, il 
peut etre important de parler des points positifs (et 
ce, d'autant plus si vous n'etes pas implique au quo- 
tidien dans le projet). Notamment, si un principe 
vous parait particulierement bien pense, n'hesitez 
pas a le noter. Cela permettra aux acteurs du projet 
d'en prendre conscience et d'etre prudents s'il est un 
jour question de modifier ce principe. 
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Tableau 6-5 Repartition des objets audites selon les passes 



Premiere passe 


Seconde passe 


Traduction de I'utilite generale du site 


Contenu des autres pages dans 
1 ordre d importance 


Architecture de I'information, navigation, structuration 
du dialogue, enchamements, interactions 


Pages incontournables 


Themes incontournables 



Les outils de I'audit ergonomique 

Bien evidemment, I'audit ergonomique se base sur la confrontation d'un 
site a un ensemble de regies d'ergonomie, qui est done votre principal 
outil de travail. Mais ce n'est pas tout. D'autres moyens peuvent vous 
aider a mener a bien cette tache le plus efficacement et le plus precise- 
ment possible. 



Methodologie Chacun sa grille 
mais un socle commun pour tous 

Tout le monde s'accorde sur les conventions et 
normes d'ergonomie web, mais il est frequent que 
chaque specialists construise sa propre grille d'uti- 
lisabilite, basee sur les criteres qu'il retient. Ces 
grilles peuvent etre tres contextuelles au domaine 
dans lequel on travaille. Au-dela d'un outil indivi- 
duel, elles constituent un socle d'analyse commun 
au sein d'une entreprise. Elles peuvent alors etre 
tres detaillees. 



Methodologie 
Regies et specificites projet 

Si necessaire, pensez a augmenter, adapter ou con- 
textualiser les regies generiques d'elements specifi- 
ques au projet sur lequel vous travaillez. Le debut 
de ce chapitre evoque notamment comme les per- 
sonam les technologies employees et le type de site 
ont une influence sur les points que vous etudiez. 



Les regies ergonomiques, premier guide de travail 

Nous avons evoque au chapitre precedent 12 regies simples auxquelles 
votre site web doit se conformer. Votre premier outil, ce sont ces regies 
d'ergonomie. Elles doivent vous servir de repere pour evaluer si votre site 
repond aux exigences de l'ergonomie web et dans quelle mesure. Sans 
elles, revaluation n'est basee que sur l'intuition. Elles sont done essen- 
tielles pour vous garantir, d'une part, d'aller dans le bon sens et, d'autre 
part, de ne rien oublier. 

Cette grille d'analyse devient tres puissante lorsque vous l'avez comple- 
tement integree a votre reflexion et que vous la conservez en tete en per- 
manence. On devient expert lorsque Ton detecte tres rapidement les 
defauts d'une interface, sans avoir besoin de consulter une quelconque 
liste. Connaitre les principes de l'ergonomie permet de se forger un filtre 
mental a travers lequel on voit le monde. C'est ce filtre qui permet de 
detecter les contradictions d'une interface avec un principe fondamental 
d'ergonomie. Au fur et a mesure, cela devient un reflexe. 

C'est tout a fait different de partir de la liste de regies pour y comparer le 
site. Meme si c'est un passage oblige pour un debutant, cette activite ne 
fait pas appel aux meme processus mentaux et la rigidite de la methode 
se ressent sur les observations. En fait, l'activite d'audit fonctionne beau- 
coup mieux en top-down (quand ce sont les connaissances qui dirigent 
I'audit) qu'en bottom-up (quand on part de l'interface pour conduire 
I'audit). II semble que Ton soit plus efficace lorsqu'on remarque plutot 
que lorsqu'on cherche. 
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Logiciels et outils techniques 

Quelques outils logiciels sont incontournables pour vous aider lors d'un 
audit. lis vous permettront de travailler plus efficacement, plus rigoureu- 
sement et plus rapidement, et pourront vous aider a valider ce que vous 
percevez intuitivement. 

Prendre des notes 

L'outil principal de l'audit, c'est un support pour prendre des notes. La, 
tout est valable a partir du moment ou c'est un outil sur lequel vous etes 
a l'aise. Un simple traitement de texte sera done parfait, voire un bloc- 
notes informatique pour vous soustraire a la tentation de mettre en 
forme vos premieres remarques. 

Pour aller un peu plus loin, il existe un outil interessant propose par 
Mozilla, nomme uzReview : il vous permet d'auditer une interface web 
sur la base d'heuristiques (celles de Jakob Nielsen et de Keith Instone). 
Cet outil se propose d'ajouter a un navigateur web une colonne d'outils 
consacres a l'audit ergonomique. Cela peut etre interessant notamment 
pour les debutants ou pour les acteurs dont l'activite principale n'est pas 
l'ergonomie. II permet en effet de travailler rapidement et de maniere 
cadree, sans se perdre dans des details. UzReview supporte a la fois 
l'activite meme de l'audit et la generation de rapports. A telecharger gra- 
tuitement sur : http://uzilla.mozdev.org/heuristicreview.html. 

Faire des captures d'ecran 

La seconde activite la plus frequente lors d'un audit, c'est la capture 
d'ecran. Mission par mission, creez-vous un pack de copies d'ecran 
retracant pas a pas votre parcours. Croyez-moi, vous en aurez besoin ! 
D'une part, les sites Internet changent (c'est done un moyen de con- 
server une preuve de ce que vous avancez), d'autre part, il est appreciable 
de disposer d'un stock d'images pour les ecrans audites. Vous reutiliserez 
ces images lors de l'etape de traitement de vos remarques, ainsi que dans 
le rapport de restitution de l'etude, si vous en redigez un. Plusieurs outils 
sont disponibles pour vous aider a capturer les ecrans. Nous vous presen- 
tons ici ceux que nous preferons, mais il en existe de nombreux. 

Tout d'abord, le plus simple : une extension Firefox. Screengrab! vous 
permet de copier tout ou partie de la page en cours. Son avantage prin- 
cipal, c'est qu'il permet de capturer la page en entier. Extremement facile 
a utiliser, il permet d'enregistrer en deux clics n'importe quelle page html 
au format png. Enfin, non negligeable, Screengrab! est gratuit. Merci 
done a Andy Mutton pour ce formidable outil ! 
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Methodologie Choisissez la meme 
configuration que votre persona 

Lorsque vous effectuez des copies d'ecran (et plus 
largement lorsque vous auditez un site), pensez a 
adopter la meme configuration que votre persona 
(ou la plus proche possible). Si vous souhaitez vous 
mettre a la place de votre persona, allez jusqu'au 
bout. Pensez notamment a adapter le navigateur 
que vous utilisez ainsi que votre resolution d'ecran. 
Sinon, vous risquez de passer a cote d'elements 
essentiels du point de vue de I'utilisabilite. 
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Figure 6-19 L'extension Screengrab! sur Firefox vous permet de sauvegarder une page ou une partie d'une 
page sous plusieurs formats. A telecharger gratuitement sur : https://addons.mozilla.Org/fr/firefox/addon/1 146 

Source : www.ikea.fr 

Le second type d'outils pour capturer les pages d'un site web sont les logi- 
ciels copieurs d'ecrans. Les deux meilleurs rapport qualite / prix dans cette 
gamme de logiciels sont Hypersnap et Snaglt. Hypersnap est un petit 
logiciel tees leger produit par la societe Hyperionics, qui vous permet de 
realiser facilement des copies de toute une page, de tout un ecran ou de 
toute une selection. II propose notamment des raccourcis clavier configu- 
rables qui rendent la copie tees efficace et tees rapide. Hypersnap ne coute 
pas tees cher (environ 30 €) et il est disponible en version d'essai (il laisse 
alors un watermark sur chacune des images). Dans le meme ordre de prix, 
vous pouvez essayer Snaglt de Techsmith, qui propose des fonctionnalites 
interessantes d'annotation et de dessin sur les copies d'ecran. Ce dernier 
logiciel est disponible en version d'essai pendant 30 jours. 

En fonction des sites que vous auditez et des outils de copie d'ecran que 
vous utilisez, vous pourrez rencontrer des difficultes a capturer certains 
ecrans. C'est notamment le cas des interfaces en Flash (meme si certaines 
sont capturables dans certaines conditions), mais aussi des evenements 
dynamiques (par exemple, comportement des objets au survol de la souris, 
messages d'erreurs, etc.). II ne vous restera alors guere d'autee issue que la 
copie via la touche ImprEcran et le collage puis l'export dans n'importe quel 
logiciel de teaitement d'images (Paint, GIMP, Photoshop, etc.). 

Pour gerer plus facilement vos copies d'ecran, vous pouvez les numeroter 
dans l'ordre ou vous les avez realisees et les associer a des mots-cles. 
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Enfin, il existe d'autres solutions que la capture statique d'ecran, notam- 
ment pour les interfaces tres dynamiques. Ainsi, il peut etre interessant 
de filmer l'ecran pour extraire une sequence d'interaction particuliere 
sans etre oblige de reiterer Taction. Reservez toutefois cette eventualite 
aux interfaces qui le necessitent, car le traitement de la video vous 
demandera plus de ressources que le traitement d'images statiques. 

La capture sous forme video a cet avantage de donner tout le temps sou- 
haite pour l'analyse de chaque ecran (alors qu'en pleine procedure en 
ligne, c'est parfois delicat puisqu'on risque de se faire deconnecter). De 
plus, cela permet de ne rien oublier pendant la capture (notamment 
lorsque vous etes confronte a de nombreux micro-changements). Enfin, 
cette methode est tres interessante pour mesurer les temps de charge- 
ment et de traitement de la part du systeme. Nous vous proposons une 
liste de nos outils preferes pour filmer efficacement l'ecran a la fin du 
chapitre 11 (ce sont en effet des outils employes lors des tests utilisa- 
teur). Vous trouverez aussi une fonction d'enregistrement au format .avi 
dans Snaglt, moins performante mais suffisante pour l'activite d'audit. 

Tester la compatibility technique 

Nous avons vu dans le chapitre precedent que la regie n° 1 1 integrait des 
problematiques d'accessibilite technique. Puisqu'il est important que vos 
visiteurs puissent acceder a votre site et l'utiliser, quel que soit le materiel 
dont ils disposent, vous devez tester ce parametre. Bien sur, vous n'allez 
pas tester toutes les plates-formes du monde. Pensez toutefois a tester 
les principales et encore plus celles de vos personas. 

Vous devez done observer comment le site se presente et se comporte en 
fonction de la configuration des plates-formes que vous utilisez. Les 
deux principaux parametres influencant la consultation d'un site web 
sont d'une part la resolution d'ecran et d'autre part le couple systeme 
d'exploitation/navigateur. 

En ce qui concerne la resolution d'ecran, trois solutions : soit vous etes 
par defaut dans la meme resolution que celle que vous souhaitez tester 
(c'est alors la situation ideale) ; soit vous disposez d'un second ecran 
reserve a la navigation lors de l'audit (et c'est tres bien aussi) ; soit vous 
etes oblige de modifier la resolution d'ecran a chaque fois que vous 
voulez faire une copie d'ecran (et c'est alors infernal). Vous risquez, de 
plus, de passer outre cette validation a cause de la difficulte supplemen- 
taire que represente le changement de resolution. Une solution consiste 
alors a utiliser Firefox et l'extension Web Developer, qui vous permet 
d'afficher la fenetre de navigateur a la taille desiree. Le meme type 
d'extension existe pour Internet Explorer. 
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Figure 6-20 L'extension Web Developer sur Firefox vous permet entre autres de redimensionner votre fenetre en 

specifiant une hauteur et une largeur en pixels. Soit dit en passant, elle est aussi tres utile pour vider votre cache tres 

rapidement. A telecharger gratuitement sur : https://addons.mozilla.org/fr/firefox/addon/60 

Source : www.cnam.fr 

Pour consulter un site sur differents navigateurs, les choses se compliquent. 
Dans l'ideal, il faudrait disposer de toutes les plates-formes necessaires. Si 
c'est impossible, arrangez-vous pour disposer des principales (notamment 
Mac/PC, sous plusieurs systemes d'exploitation). Pour le reste, vous 
pouvez utiliser Browsercam. Ce service payant permet de tester l'apparence 
de votre site sur l'essentiel des navigateurs du marche. Vous n'aurez cepen- 
dant pas acces au comportement du site sur ces navigateurs, puisque cet 
outil vous demande une URL et restitue simplement une image de la 
maniere dont cette URL s'affiche sur les differents navigateurs. 

Attention, ne vous arretez pas au navigateur. Pensez a desactiver Flash 
(c'est possible sur Internet Explorer en desactivant les controles ActiveX 
dans les parametres de securite du navigateur) et a verifier quelle version 
de Flash utilise le site. Pensez aussi a desactiver JavaScript. En fait, lorsque 
le site que vous auditez utilise une technologie en surcouche de la configu- 
ration de base du navigateur, testez-le aussi sans cette technologie. 

Enfin, il peut etre interessant de tester votre site dans des conditions degra- 
dees (notamment lorsque vous travaillez sur des intranets ou extranets et 
que le debit de la connexion Internet est limite sur les postes cible). Utilisez 
alors le logiciel Netlimiter pour reduire le debit Internet au seuil souhaite. 

Evaluer l'accessibilite visuelle 

En ce qui concerne l'accessibilite visuelle, de nombreux outils d'evalua- 
tion sont disponibles pour vous aider a mener votre enquete, que ce soit 
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pour apprecier strictement l'accessibilite visuelle ou l'accessibilite du site 
aux outils de contournement du mode visuel (plages braille ou syntheses 
vocales). Nous allons aborder ces differentes thematiques dans l'ordre 
ascendant d'atteinte de la modalite visuelle. 

La base de l'accessibilite visuelle, c'est la lisibilite. Vous devez vous 
assurer que votre site utilise des couleurs adaptees pour ne pas fatiguer 
l'oeil. Ce type devaluation se conduit principalement sur le texte et les 
images a destination fonctionnelle (par exemple les barres de navigation 
et boutons d'action). Deux dimensions sont a prendre en compte : 

• D'une part, vous devez evaluer si les couleurs utilisees pour le fond de 
page et les caracteres typographiques sont suffisamment contrastees. 
Pour faciliter la lecture, elles doivent etre suffisamment differentes. 
L'algorithme fourni par le W3C utilise le seuil de 500, mais sachez 
qu'il est difficile a atteindre. Reservez-le done si votre population 
presente un risque eleve de malvoyance (c'est notamment le cas des 
seniors). Une difference de couleurs de 400 parait largement suffi- 
sante dans la plupart des cas. 

• D'autre part, vous devez evaluer la difference de brillance (ou de 
luminance) de vos couleurs. Pour que vos textes soient lisibles sans 
effort, cette difference doit etre superieure a 125. Vbici deux outils 
utilisant l'algorithme fourni par le W3C pour vous permettre de cal- 
culer rapidement les contrastes fond/caracteres, ainsi que les niveaux 
de luminance. Ces deux outils sont disponibles gratuitement en 
ligne. II en existe d'autres en mode logiciel. 
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Figure 6-21 Sur ces deux sites, vous pouvez mesurer si le contraste des couleurs et leur brillance 
sont suffisants. Ci-dessous, un exemple positif et un negatif. En general, trois resultats existent : 
compatible, non compatible, presque compatible. 
Sources : www.etre.com/tools/colourcheck / www.snook.ca/technical/colour contrast/colour.html 
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ASTUCE Memorisation automatique du 
code couleur dans ColorZilla 

Vous pouvez activer la copie automatique du code 
de la couleur selectionnee grace a I'option corres- 
pondante du menu contextuel. 



Pour obtenir les codes hexadecimaux a saisir dans ce genre d'outils, vous 
pouvez fonctionner a l'ancienne, en faisant une copie d'ecran que vous 
collez dans un logiciel de traitement d'images, lequel vous donnera le 
code hexadecimal recherche. Mieux, vous pouvez utiliser une extension 
de Firefox nommee ColorZilla, extremement efflcace puisque concue 
exclusivement a cette intention par Alex Sirota. Grace a la pipette, vous 
pouvez pointer n'importe quel pixel de l'ecran et ColorZilla vous donne 
le code correspondant. 



Figure 6-22 

L'extension ColorZilla sur Firefox vous 

permet d'obtenir le code hexadecimal 

d'une couleur affichee a l'ecran. 

A telecharger gratuitement sur : https:// 

addons.mozilla.org/fr/firefox/addon/271 

Source : www.jamieoliver.com/fr 
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OuilL Le cote technique de I'accessibilite 
peut etre mesure automatiquement 

De nombreux outils permettant de valider 
« techniquement » I'accessibilite visuelle de votre 
site sont aussi disponibles en ligne. Parmi eux : 

► www.contentquality.com 

► www.wave.webaim.org 

► webxact.watchfire.com 



Un outil supplemental vous permet d'aller plus rapidement en fournis- 
sant seulement l'URL d'une page. C'est le validateur AccessColor qui 
evalue ensuite les differences de couleurs et de luminances de ces cou- 
leurs sur la base de vos feuilles de styles. II ne permet done d'analyser 
que I'accessibilite des textes presentes en HTML. Vous pouvez l'utiliser 
gratuitement sur http://www.accesskeys.org/tools/color-contrast.html. 

L'extension Firefox proposee par Gez Lemon utilise le meme principe. 
Vous pouvez la telecharger sur http://juicystudio.com/article/colour-contrast- 
analyser-firefox-extension.php. Elle permet tres facilement d'obtenir 
l'ensemble des rapports de contrastes d'intensites et de couleurs pour 
tous les textes HTML d'une page. Le principal defaut de ces deux der- 
niers outils est de ne pas pouvoir calculer les contrastes sur des sites en 
Flash, des images ou des textes survoles. 

Si vous souhaitez aller plus loin dans revaluation de I'accessibilite 
visuelle, vous devez observer comment les gens voient votre site en cas 
d'atteinte des cones de perception de la couleur. De nombreux outils 
sont disponibles pour simuler ce que Ton appelle la dyschromatopsie, 
dans ses differentes modalites. Vous pouvez ainsi utiliser en ligne l'outil 
ColorBlindnessCheck, propose par Q42. Grace a cet outil, vous pouvez 
visualiser une page web en fonction de differentes atteintes de la perception 
des couleurs. A utiliser en ligne sur : 
www.q42.nl/demos/colorblindnesssimulator/colors.html. 
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Pour tester l'achromatisme, c'est-a-dire l'absence totale de perception 
des couleurs, vous pouvez aussi utiliser ce types d'outils ou utiliser un 
logiciel de traitement graphique pour passer vos copies d'ecran en 
niveaux de gris. 

Cette micro-evaluation est interessante car elle permet de reperer tres 
rapidement si quelque chose cloche au niveau de la conception gra- 
phique du site. Elle est notamment indispensable pour verifier si des 
informations importantes ne sont pas transmises uniquement par 
l'indice de la couleur (et, si c'est le cas, si les couleurs utilisees sont suffi- 
samment differentes en termes de tonalite pour etre percues comme 
telles par quelqu'un qui ne percoit pas la couleur). 

Observez ainsi les deux exemples suivants. Si l'etat du stock est indique 
uniquement avec la couleur de la pastille, on ne percoit pas la difference 
entre l'etat epuise (indique en rouge) et l'etat indisponible (indique en 
orange). Si, par contre, on fait varier le libelle et que la couleur est attri- 
bute aux caracteres de ce texte, on peut saisir la difference entre epuise et 
indisponible meme si Ton ne percoit pas les couleurs. 
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9,00 € 

Etat du stock 




9,00 e 

Etat du stock # 




Voir votre selection d'articles 


Voir voire selection d'articles 













Figure 6-23 

Si on utilise seulement la couleur de la pastille pour distinguer 
un produit epuise d'un produit indisponible, on ne peut pas 
comprendre I'interface sans perception des couleurs. 
Source : www.reservoir-jeux.com 





9,00 e 

Epuise 




9,00 € 

Indisponible 




Voir votre selection d'articles 


Voir votre selection d'articles 













Figure 6-24 

En ajoutant un libelle textuel, on peut comprendre I'interface 
sans perception des couleurs. 
Source : www.reservoir-jeux.com 



Enfin, vous pouvez utiliser differents outils pour determiner si votre site 
est utilisable en version texte. Commencez par le tester avec un naviga- 
teur alternatif (par exemple Opera ou une extension d'un navigateur plus 
classique) afin de desactiver l'affichage des images. Vous vous rendrez 
compte assez rapidement si une information importante est transmise 
par le biais des images. 

Ensuite, testez avec un navigateur en mode texte (par exemple Lynx ou 
BrailleSurf). Si le site est developpe en CSS, vous pouvez aussi le tester 
avec un navigateur classique en utilisant la feuille de styles « texte » s'il 
en existe une, ou encore en desactivant les feuilles de styles (l'extension 
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Definition Que sont les syntheses vocales 
et les plages braille ? 

Une synthese vocale est un dispositif logiciel qui 
permet d'utiliser un ordinateur en mode auditif. Elle 
transforme la version texte du site en version parlee, 
permettant aux internautes d'acceder a ce qui se 
trouve a I'ecran et d'agir dessus grace au clavier. 
Allez done voir sur le site qui accompagne ce livre 
comment une synthese vocale lit un site web. C'est 
tres enrichissant. 
► www.ergonomie-sites-web.com/ 

telechargements 
Une plage braille exploite le meme principe de 
base, mais restitue un site web sous forme tactile. 
C'est plus precisement le materiel de restitution 
que Ton appelle la plage braille. 



Citation « Squint to open your eyes » 

John Maeda, se referant a cette technique de 
visualisation, nous dit : « You will see more, by 
seeing less » (Vous verrezplus, en voyant moins). 
£Q John Maeda, The Laws of Simplicity, The 
MIT Press, 2006 



Web Developer de Firefox vous sera encore une fois tres utile). C'est de 
la version texte de votre site que se serviront les syntheses vocales et les 
plages braille pour traduire le site sous forme auditive ou tactile. Vous 
aurez done un bon apercu de ce qu'elles vont restituer aux internautes. 

Derniere etape : tester avec de veritables moyens de contournement du 
mode visuel, e'est-a-dire avec une plage braille ou avec une synthese 
vocale. C'est plus facile a faire avec une synthese vocale, qui ne necessite 
pas de materiel specifique (tout se passe au niveau logiciel). Vous pouvez 
par exemple utiliser la synthese Jaws, disponible en version d'essai pour 
une duree limitee. Pensez a tester differents reglages qui modifient le 
comportement de la synthese, les elements quelle lit ou auxquels elle 
donne priorite. 

Evaluer la forme genera le du site 

Une derniere technique interessante, bien que peu rigoureuse, consiste a 
evaluer la forme generale d'un site d'un point de vue visuel. Rappelez- 
vous les principes de Gestalt que nous evoquions au chapitre 3 et, plus 
particulierement, la notion de forme generale. 

L'utilisabilite de cette forme est accessible de maniere assez empirique : 
si vous plissez les yeux ou louchez pour voir flou, vous percevrez l'essen- 
tiel de l'organisation visuelle de la page. Le resultat obtenu semble assez 
representatif de l'activite de scan des internautes - activite que nous 
avons evoquee au chapitre precedent. II vous permettra de reperer si Ton 
distingue bien les differentes zones de navigation et de contenu, ainsi 
que les call-to- action. Vous pouvez reproduire ce precede sous Pho- 
toshop en appliquant le nitre gaussian blur ou flou gaussien. 



Que faire de vos observations ? 

Vous avez scrupuleusement essaye de vous mettre a la place de vos per- 
sonas et de realiser chacune des missions qui leur incombent. De ce par- 
cours, vous avez tire un ensemble de remarques, dont vous devez a 
present faire quelque chose. 

Hierarchisez vos observations 

Trouvez les erreurs, mais sachez aussi les analyser. Si vous souhaitez eva- 
luer l'ergonomie d'un site web, structurez l'analyse de chaque probleme 
rencontre suivant les etapes decrites ci-dessous. 
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Si vous avez suivi notre conseil (a savoir de commencer par les defauts les 
plus criants pour aller successivement vers les points moins critiques) vous 
devez deja avoir une idee de l'importance des defauts identifies. Cepen- 
dant, ce nest pas le seul element qui permette de hierarchiser vos observa- 
tions. 

Savoir hierarchiser vos constats est si important que Jakob Nielsen et 
Hoa Loranger en ont fait le titre de leur ouvrage, Prioritizing Usability. 
Dans le chapitre 5, ils presentent une maniere de ponderer les observa- 
tions d'un audit en soumettant chacun des constats a 3 questions : 

1 Quel est l'impact du defaut observe (allant de la simple gene a 
l'impossibilite de realiser une tache) ? 

2 Quelle est la frequence du defaut observe ? Autrement dit, combien 
d'utilisateurs vont rencontrer le probleme ? 

3 Quelle est la persistance du defaut observe ? Autrement dit, est-ce 
que les utilisateurs qui auront rencontre le probleme une premiere 
fois pourront sen affranchir ou le contourner plus facilement les fois 
suivantes ? 

Notez que certaines observations ne seront pas critiques d'un point de 
vue ergonomique mais que, repetees, elles peuvent amener votre inter- 
naute a preferer un autre site. Un bon nombre de defauts sur le plan 
ergonomique ne mettent pas en danger l'accomplissement de la tache 
par l'internaute : ces defauts pourront le gener, lui faire commettre des 
erreurs, allonger le temps de realisation, mais il parviendra a son but tant 
bien que mal. Ils valent done la peine d'etre soulignes, puisqu'une accu- 
mulation de ce type de defauts peut deranger votre internaute au point 
qu'il perde toute envie de revenir sur votre site. 

Les livrables de I'audit 

La sortie de la methode de I'audit peut etre plus ou moins detaillee et 
justifiee. Cependant, ne redigez pas un gros rapport au detriment d'un 
audit plus pousse. Ainsi, si le fait de ne pas expliquer chacun des points 
en detail vous permet d'aller plus en profondeur, n'hesitez pas ! 

Pensez a expliquer comment lire le document, a fournir une synthese, 
une table de correspondance lexicale, etc. En ce qui concerne le contenu 
a proprement parler, voici deux exemples de la maniere dont on peut 
presenter des pages d'audit ergonomique. 
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Menu de navigation / Cloisonnement 



ODans lcs pages :ni.cr:curcs du site, le menu est situi 
s'agit dc l'onl.il principal dc navigation. Pour tan t, s> 

limile l':nicrna,:ic dans sa na\ igaimn. 



i gauche. II 



Ainsi, lorsquc Ton navigue a I'inlcnci.ir d'unc des trois grande; 
rubriqucs (cf. "Notre mission" dans l'excmple ci-ccmttc), il 
est impossible d'acccdcv au\ deux aulres rubriqucs ("Votrc 
projet"/ "Par ten aires"). 

II n'est pas non plus possible dc revenir a Taccucil via cc meni 
Finalcmcni. n scmblc que Lnui cc que Ion puissc laire csl 
.plomi-on dc la rubriquc consuuec. 

ic 1'imprcssiun dV.re "coince" dans la 
pouvoiv acccder ,iu\ rubriqucs rouge ei. 



On a en quclquc 
rubriquc jaunc, s 
gnsc. 



La scuJc 

pen evident pour i 

Lc choix d'un svsu 

impose des 

limitcr sa navigation a T 



r Faccueil. Or, nous 
h la page d'accueil e 



dc cloisonnement dc la navigadoi 
qui lc pousscront a 



1'informadon dont il a bes 



ubriquc, et pourront 



rempecher dc 



Dans ccrtaines pages du sile. ("Index" / "Sites web" / "Plan 
de site" / "Profil" ... ) n'appar tenant a aucunc des 3 grandes 
rubriqucs, on trouve un menu fburnissant un acces a ces 

rubriqucs. (."est cc ivpe de grand c er.ivee qui dc.vrait ctre 
fournic en permanence ou que Ton sc irouvc dans lc sue. 
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Menu principal dc la page Index 

Recommendation 

On fera apparaitre les trois parties principales sur I'ensemble des pages du site. 

line possibility de retour a I'accueil doit egalement figurer dans le menu. 



Note : 



Onti 
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pas en compte 
id le HI d'ariane 
commc alternative 
de navigation car 
cet outil n'est pas 
optimise sur le site 
acmel d'Osco. 
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Figure 6-25 Extrait d'un rapport d'audit ergonomique du site d'OSEO. 
Source : www.oseo.fr 



La suite des evenements 



Avoir constate un defaut ne suffit pas. Encore faut-il etre capable de creer 
une solution d'interface pour y repondre. 

II est normal et conseille de penser en temps reel a une solution pour 
resoudre chaque probleme observe. C'est d'ailleurs souvent l'existence 
d'une issue qui permet, d'un point de vue ergonomique, de qualifier ce 
qu'on observe de defaut ou non. Si Ton ne trouve pas de solution, cela 
signifie peut-etre que ce que Ton observe correspond a un pis-aller, un 
compromis, la « moins pire » des solutions d'interface. Parallelement, il 
existe des sujets trop vastes pour y trouver une solution dans l'immediat. 
C'est souvent le cas des problematiques d'architecture de l'information. 
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Menu deroulant 



I Dans la rubrique "Votre pro jet" 
1'acces aux sous-rubriques se fait a 



Ce menu est present dans la rubrique 
"Votre projet" alors qu'il est absent 
des deux autres parties principaies. 

La zone cliquable occupe une 
place consequente dans le milieu 

de page (653 pixels de large), ce 
qui a pour consequence de deplier 
le menu de maniere repetitive et 
parfois incongrue en function des 
:s de la souris. 



En outre, ce menu manque de 
praticite pour plusieurs raisons: 
. II cache beaucoup de texte 

. II --'active Iocs du passage de la 

bloque dans sa position depliee. 
. S'ils cberchent a effectivement 
passer dune sous-rubrique a une 
autre, Philippe et Alain n'auront pas 
idee d'aller survoler ce qui ressemble 
a un titre de page. 

e de ces remarques fait que 
:t le fonctionnement de 
ce menu gene l'internaute au lieu de 
r.udi-T dans sa rac'ic. 



Recommandation 

Suppression du menu deroulant qui est 
inutilisable tel qu'il est implements actuellement. 
On pourrait pour le remplacer utiliser des 
sous parties deroulantes de la navigation 
principale, comme cela est fait pour les autres 
parties du site OSEO. L'application de cette 
recommandation permettra en outre de 
concentrer tous les outils de navigation au meme 
endroitde I'ecran. 
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Figure 6-26 Extrait d'un rapport d'audit ergonomique du site d'OSEO. 
Source : www.oseo.fr 

Ne vous arretez done pas en si bon chemin et formalisez des solutions 
aux defauts que vous avez reperes lors de l'audit. Vous apprendrez com- 
ment aux chapitres 7, 8 et 9. 
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QUATRIEME PARTI E 



Les etapes de la 
conception web : 
pensez votre site 
de A a Z 



Apres avoir aborde tout ce qui impacte la qualite ergonomique d'un site, il 
est temps pour vous de passer a Taction ! Dans cette quatrieme partie, nous 
aborderons successivement comment definir votre contenu, l'organiser, puis 
le formaliser a l'ecran. 



chapitre 
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Definition des contenus 
et analyse concurrentielle 



Le contenu d'un site web est sa principale raison d'etre, 
il represente ce que vos visiteurs viennent chercher. 

C'est sur lui que repose votre credibilite. Aussi, avant 

de vous lancer dans la conception de votre site a proprement 

parler, prenez le temps de vous poser et de renechir 

a ce qu'il va proposer aux internautes. 



SOMMAIRE 

► Definitions des contenus 

► Utilite globale et micro-utilites 

► La demarche de I'analyse 
concurrentielle 

MOTS-CLES 

► Contenus 

► Fonctionnalites 

► Utilite et micro-utilites 

► Analyse concurrentielle 

► Benchmark ergonomique 



METHODOLOGIE Et si je saute cette etape ? 

Si vous commencez a concevoir un site sans avoir 
reflechi a ce qu'il contiendra, vous obtiendrez 
immanquablement une coquille vide qui 
accueillera difficilement tout ce que vous voudrez 
y injecter par la suite. Dans de tels cas, les inter- 
nautes pensent souvent que le site ne fournit pas 
le contenu qu'ils cherchent parce que I'interface 
n'a pas ete pensee pour. 

Chaque site Internet doit etre concu sur mesure 
pour le contenu qui y sera presente. La premiere 
etape consiste done necessairement a definir ce 
contenu. 



Contenu 



VOCABULAIRE 
informations + fonctionnalites 



Dans ce livre, nous employons le terme contenu au 
sens large : il peut s'agir d'informations, mais 
aussi de services et de fonctionnalites proposes a 
vos internautes. 



Methode Sans utilite, pas besoin 
d'utilisabilite 

Un site ergonomique est d'abord un site utile. Si les 
internautes ne viennent pas sur votre site parce que 
vous ne proposez rien d'interessant a leurs yeux, 
peu importe que votre site soit utilisable ou non... 



La premiere etape concrete dans la conception d'un site web consiste a 
choisir ce qui en sera le cceur, e'est-a-dire ce que vous allez offrir aux 
internautes. II ne s'agit pas juste d'avoir un site, encore faut-il, pour 
qu'ils aient envie de s'y rendre, qu'il corresponde a un besoin chez vos 
visiteurs. 

Votre contenu est ce pour quoi vous fabriquez un site web. Ce site nest 
que le support, e'est-a-dire la forme qui permet d'abriter la matiere fon- 
damentale. Pour que ce support soit efficace, vous devez connaitre votre 
contenu et avoir travaille dessus ; e'est votre reelle valeur ajoutee, ce qui 
vous differencie des autres. 

Pour prevoir le contenu le plus adapte possible a vos internautes, vous 
devez venir repondre a un besoin utilisateur, autrement dit etre utile a 
vos visiteurs. Voyons done plus precisement ce que recouvre cette notion 
d'utilite. 



Votre contenu repond a un besoin 
de I'internaute 

Nous avons vu dans le premier chapitre de ce livre que l'utilite est ce qui 
vous permet de capter un utilisateur : celui-ci vient sur votre site parce 
qu'il pense que vous pouvez satisfaire son besoin. 

Ce besoin peut pre-exister chez I'internaute, avant meme qu'il ait allume 
son ordinateur. Un utilisateur peut aussi se construire une envie au fil des 
informations rencontrees lors de sa navigation sur le Web. Par conse- 
quent, vous ne devez pas seulement repondre a un besoin, mais aussi 
savoir devancer votre visiteur en lui proposant des choses qui pourraient 
lui plaire. Deux situations peuvent alors se produire de facon soit inde- 
pendante, soit consecutive : 

• Votre internaute vient precisement pour ce que vous lui offrez. C'est 
la situation la plus courante. II connait votre site. On le lui a recom- 
mande ou il vous a trouve via un moteur de recherche. 

• Vous reussissez a creer un besoin chez lui en lui proposant quelque 
chose. D'un point de vue macroscopique, c'est le mecanisme de la 
publicite web : vous profitez de sa presence sur le Web pour l'allecher 
avec votre offre. D'un point de vue interne a un site, cela consiste a se 
servir d'un des contenus du site pour attirer votre internaute vers 
d'autres contenus. 

Capter un internaute, c'est done reussir a l'attirer chez vous grace a ce que 
vous lui proposez. Dans ce cadre, deux grandes dimensions permettent de 
distinguer l'offre d'un site : son utilite globale et ses micro-utilites. 
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Quelle est votre utilite globale ? 

Normalement, toute demarche de creation ou de refonte d'un site web 
est guidee par la necessite de proposer en ligne des contenus bien precis : 
vous avez envie de vendre les produits de votre catalogue sur le Web, de 
faire un site pour votre pizzeria, de concevoir un pendant web a un 
magazine papier, de vendre un service Internet, etc. 

Qyoiqu'il en soit, vous avez une idee. C'est cette idee que Ton va appeler 
votre utilite globale. Elle represente ce a quoi va servir votre site pour vos 
internautes : acheter de l'electromenager, trouver votre carte de menus et 
vos coordonnees telephoniques, acheter un abonnement en ligne, s'ins- 
crire a des cours de conversation en anglais par Internet, trouver une liste 
de revendeurs, reserver une chambre d'hotel, etc. 



Methode Je veux me lancer dans le Web, 
faites-moi un site 

Si vous n'avez pas d'idee en termes d'utilite, 
trouvez-en une ou changez de projet. Vous ne 
pouvez pas juste vouloir un site web, sous peine 
que ce dernier ne serve effectivement a rien. 
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Figure 7-1 Actions liees aux utilites globales du site du Blue Elephant : consulter les menus 

et trouver le numero de telephone du restaurant. 

Source : www.blueelephant.com/paris 
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Figure 7-2 

Action liee a I'utilite globale 

du site de Darty : acheter 

de I'electromenager. 

Source : www.darty.com 
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Figure 7-3 

Action liee a I'utilite globale du site 

de Magimix : trouver une liste 

de revendeurs de la marque. 

Source : www.magimix.com 
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Notez qu'en general, un site a plusieurs niveaux d'utilite, e'est-a-dire 
qu'il fournit plusieurs types de contenus ou services a ses internautes. 
Cependant, l'une des utilites prime en general sur les autres et soutient 
l'objectif final que vous voulez voir accomplir par votre internaute. Par 
exemple, un site propose souvent de l'information pour sous-tendre un 
processus transactionnel. Ainsi, le site du magazine Muze est une vitrine 
du magazine papier ; il sert surtout a donner envie aux visiteurs d'acheter 
le magazine en kiosque ou de s'abonner en ligne. Ainsi, on peut 
feuilleter Muze en ligne, consulter la liste des auteurs abordes dans les 
numeros passes, s'inscrire a la newsletter, et e'est a peu pres tout : 
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Figure 7-4 

La principale utilite du site de Muze 
est de promouvoir I'abonnement. 
Source : www.muze.fr 



Ces utilites peuvent etre inversees, comme par exemple sur le site de 
Telerama : 
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Figure 7-5 

Une des principales utilites du site de Telerama 
est de proposer des contenus editoriaux dans 
le domaine de la television, du cinema, du theatre, 
de la musique, etc. 
Source : www.telerama.fr 
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VOCABULAIRE 
Utilite generale versus utilite ponctuelle 

La notion d'utilite dont on parle dans ce chapitre 
concerne essentiellement les services et fonction- 
nalites offerts par un site web. 
II faut savoir que Ton parle aussi d'une informa- 
tion « utile » en ergonomie en utilisant ce terme 
de maniere plus large. On peut ainsi dire d'une 
information qu'elle est inutile sans pour autant 
remettre en question son utilite intrinseque, mais 
son utilite a un instant t dans un contexte precis. 
Ainsi, I'utilite d'une information a un moment 
donne peut faire I'objet d'un debat si sa presence 
augmente la charge informationnelle a I'ecran. 



Dans ce livre Personas et micro-utilites 

La methode des personas est ideale pour fournir la 
matiere necessaire a I'elaboration de micro-uti- 
lites. En effet, un persona a des objectifs et des 
missions precises, qui peuvent generer des idees 
de micro-utilites. A voir au chapitre 4. 



Vous n'avez en general pas besoin de travailler sur I'utilite generale. II 
vous suffit de reussir a traduire ce que vous proposez de la meilleure 
maniere possible dans l'interface (votre logo, votre baseline, votre barre 
de navigation, votre page d'accueil vous y aideront). 

Ce n'est qu'en allant plus loin que vous trouverez les micro-utilites : 
celles-ci accompagneront cette utilite generale et vous permettront de 
proposer a vos internautes un site repondant a leurs besoins, voire les 
devancant. 

Creez vos micro-utilites 

Une fois que vous avez determine I'utilite generale de votre site, que 
vous savez ce qu'il proposera aux internautes, vous devez reflechir aux 
fonctionnalites et informations complementaires permettant a votre per- 
sona de profiter au mieux de son offre. 

Comment imaginer et choisir des micro-utilites 

Les micro-utilites ne portent pas ce nom parce qu'elles sont mineures, 
mais parce qu'elles viennent completer une utilite globale pour la servir. 
Elles ne representent done qu'un bonus permettant de capitaliser sur 
I'utilite globale et de s'assurer que l'internaute choisira votre site pour 
accomplir ses objectifs. 

Ainsi, elles repondent a la problematique suivante : « Nous avons le pro- 
duit [l'information, le contenu, etc.], comment mieux le vendre ? ». Ici, 
nous evoquerons exclusivement ce qui, d'un point de vue ergonomique, 
permet de mieux vendre, e'est-a-dire de correspondre au mieux aux 
objectifs et besoins des utilisateurs. Les micro-utilites les plus reussies 
sont celles creees en se mettant reellement a la place des internautes et 
integrant la notion de tache. De ce point de vue, les personas constituent 
une methode tres interessante pour se mettre dans la peau de vos visi- 
teurs et penser a des fonctionnalites qui leur seraient utiles. Bien evi- 
demment, vous devez ajouter a ces considerations une reflexion poussee 
d'un point de vue strategique et marketing. 

En general, les sites les plus inventifs en termes de micro-utilites sont 
ceux qui appartiennent a un secteur concurrentiel, ou ils doivent faire la 
difference sous peine de voir leurs internautes aller chez le voisin. 

Se forcer a accompagner I'utilite generale de micro-utilites, e'est done 
proposer le maximum a vos internautes pour s'assurer qu'ils repondent a 
vos souhaits (e'est-a-dire qu'ils achetent, s'inscrivent, vous recomman- 
dent, etc.). Deux types de micro-utilites peuvent etre utiles a vos 
visiteurs : d'une part une information, d'autre part une fonctionnalite. 
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Plus l'acte est engageant, plus vous beneficierez de fonctionnalites 
secondaires repondant aux besoins de vos internautes (ou, a l'inverse, 
plus vous perdrez de clients faute d'avoir su leur offrir les fonctionnalites 
et services adequats). 

Cependant, ne jouez pas a la course aux fonctionnalites. Si vous pre- 
voyez d'ajouter une fonctionnalite, cette derniere doit reellement etre 
utile pour au moins Fun de vos personas. En effet, au-dela de la charge 
de travail que represente son developpement, elle devra aussi etre inseree 
dans l'interface : cela correspond potentiellement a une augmentation de 
la charge informationnelle a l'ecran. Pourquoi demander a vos inter- 
nautes de traiter mentalement un element qui ne leur servira jamais ? 

Prenez aussi en compte le jugement subjectif des internautes sur ce que 
vous leur fournissez, notamment pour des populations tres expertes dans 
un domaine de competence, ou tres extremes, dans les milieux discount 
ou luxe. Proposer une fonctionnalite superflue ou inadaptee a vos visi- 
teurs peut paraitre peu professionnel, voire irrespectueux. 

Enfm, mesurez ce que la fonctionnalite apportera a vos internautes au 
regard des efforts requis pour la leur fournir. II est primordial de se poser 
ces questions suffisamment tot dans le projet. Ceci permet en effet 
d'engager des processus lourds en termes de preparation de contenus, 
conduits parallelement au developpement du site. 

II arrive que le fait de reflechir sur ce type de questions amene des boule- 
versements au niveau de la strategic commerciale. C'est a vous de hitter 
pour faire comprendre que meme un site tres facile d'utilisation fonc- 
tionnera uniquement s'il rend vraiment service aux internautes et tient 
compte de leurs besoins. 

Des exemples de micro-utilites 

Les micro-utilites ont pour objectif d'appuyer l'utilite globale du site, 
soit en termes de fonctionnalites, soit en termes d'informations. En void 
quelques exemples. 

Offrir la vue la plus complete possible d'un produit 

On constate frequemment sur les sites de commerce en ligne que les 
descriptifs produits sont tres succincts, voire inexistants. Or plusieurs 
etudes montrent que plus vous donnerez une information complete aux 
internautes, plus ils effectueront des achats sur votre site. Cela leur 
permet d'acheter de maniere plus informee, et reduit le risque de decep- 
tion a l'arrivee de leur commande. Si votre objectif est de fideliser vos 
visiteurs, assurez-vous done qu'ils achetent bien ce qu'ils pensent 
acheter. 
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Soyez honnetes afin que vos internautes vous fassent confiance. Ce prin- 
cipe est d'autant plus important que le prix du produit est eleve. Ainsi, si 
vous proposez d'acheter un vetement sur Internet, fournissez-en le 
maximum de vues possibles. Acceder a des images du dos ou des cou- 
tures d'un vetement, beneficier d'une vue d'une chaussure a 360° don- 
nera a votre internaute une idee plus precise de votre produit, ce qui 
influencera sa decision d'achat (figures 7-6, 7-7 et 7-8). 

Prenons un autre exemple, celui d'un produit decline en plusieurs cou- 
leurs et la maniere dont cet affichage etait gere sur l'ancien site de la 
Camif (figure 7-9). II est evident que visualiser le canape dans la couleur 
souhaitee ou simplement voir cette couleur dans une vignette carree 
n'aura pas le meme impact sur le consommateur. 



Figure 7-6 

Sur le site de Promod, on peut 

voir les vetements de dos. 

Source : www.promod.fr 
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Figure 7-7 

Sur le site d'Esprit, on peut voir les vetements 
de tres pres, jusqu'aux coutures, grace a la 
fonctionnalite Materiau zoom-in. 
Source : www.esprit.fr 




Figure 7-8 

Sur le site de Camper, on peut regarder 
les chaussures a 360°. 
Source : shop.camper.com 
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Figure 7-9 Sur le site de la Camif, de larges photos permettaient 

de voir un canape dans tous les coloris disponibles. 

Source : www.camif.fr 



Methode Le rapport entre 
micro-utilite et utilisabilite 

Penser a la fonctionnalite de Chercher au cceur 
releve de la micro-utilite. Imaginer son nom et la 
maniere dont on va la presenter releve de I'utilisa- 
bilite. 



Troisieme exemple de micro-utilite, toujours dans le domaine de re- 
commerce. Le site d'Amazon, dont une utilite generale est de vendre 
des livres, propose une utilite secondaire consistant a Chercher au cceur 
des livres afin d'en consulter les pages interieures et la quatrieme de cou- 
verture (figure 7-10). 

Ici, on va beaucoup plus loin que la vente classique de livres sur Internet, 
qui ne fournit generalement a l'internaute qu'un titre, un auteur, un prix, 
une date de publication et la photo de la couverture (lorsqu'elle est dis- 
ponible...). Mais en se promenant dans les rayons d'une librairie et en 
observant le comportement des clients, rien n'est plus evident : un des 
premiers reflexes consiste a ouvrir le livre. En effet, personne n'achete un 
ouvrage sans l'avoir feuillete, ne serait-ce que quelques secondes. Dans 
le domaine de la bande dessinee, e'est encore plus vrai. 

La meme necessite guide la presence, sur le site d'Asmodee, d'une photo 
montrant l'interieur d'une boite de jeu de societe (figures 7-11 et 7-12). 
Lutilite generale est d'acheter un jeu de societe, l'utilite secondaire de 
regarder le contenu de la boite de jeu. Observez la maniere de nommer 
cette fonctionnalite par le recours direct a la metaphore Ouvrir la boite. 
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Figure 7-10 

Sur le site d'Amazon, la fonctionnalite 
Chercherau coeur permet de regarder 
I'interieur d'un livre. 
Source : www.amazon.fr 




Figure 7-11 

Dans les fiches produits, le site d'Asmodee 
propose un lien ouvrirla bolte... 
Source : www.asmodee.com 
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Figure 7-12 

... qui permet de regarder I'interieur de la boite 

de jeu : plateau, pions, sac de rangement, etc. 

Source : www.asmodee.com 




Le site Clarins, lui, exploite un element du monde reel pour nourrir le 
descriptif de ses produits. Ce site permet en effet de consulter la notice 
sous la meme forme que celle fournie dans les vrais packagings. L'utilite 
generale est d'acheter un produit Clarins, l'utilite secondaire de pouvoir 
en regarder la notice au format PDF. Ces informations pourraient etre 
presentees en mode HTML (c'est d'ailleurs le cas des plus importantes), 
mais elles sont tees efficaces sous cette forme, car elles correspondent aux 
habitudes et attentes des clientes de Clarins. 

Une micro-utilite peut aussi simplement consister a simplifier la vie des 
utilisateurs. C'est notamment le cas des fonctions d'historique de visite, 
qui fleurissent sur les sites d'e-commerce. La visibilite des derniers articles 
consultes est par exemple tees utile lorsque les internautes effectuent beau- 
coup d'actions de comparaison entre plusieurs articles, et par consequent 
de nombreux allers-retours entre les fiches produits. 
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Figure 7-13 Les sites de Yahoo 

Food, de Kelkoo et d'Etam proposent 

a leurs internautes une visibilite 

directe sur les dernieres pages 

consultees, ce qui permet 

de faciliter les comparaisons. 

Sources : 

http://food.yahoo.com / 

www.kelkoo.fr / www.etam.fr 
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Enfm, dernier exemple sur le site de Diapers, qui propose a ses inter- 
nautes une fonctionnalite pour personnaliser leur experience de naviga- 
tion. Diapers distribue des articles pour bebes. Ce qu'il peut offrir aux 
visiteurs de son site depend done beaucoup de lage de l'enfant, et ce critere 
concerne l'ensemble des rayons. C'est pourquoi les concepteurs du site 
ont prevu une fonctionnalite tres utile et bien mise en valeur, nommee 
Personalize Shopping. 

Grace a cette micro-utilite, tout ce que propose le site (resultats de 
recherche, recommandations de produits, reductions, mises en avant...) 
s'adapte notamment a lage du ou des enfants qu'aura declare l'internaute. 
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Figure 7-14 Sur le site de Diapers, 
la fonctionnalite Personalize 
Shopping permet de se voir proposer 
des articles en fonction de I'age 
et du sexe de ses enfants. 
Source : www.diapers.com 



Bien entendu, l'ajout d'une micro-utilite n'est pas gratuit et necessite un 
investissement supplemental. Offrir des details a vos internautes sur 
vos produits, par exemple, demandera un travail a deux niveaux : d'une 
part, vous devrez disposer des contenus (la notice chez Clarins, la photo 
du canape pour la Camif, le contenu du livre pour Amazon, etc.) ; d'autre 
part, vous devrez inventer et developper la fonctionnalite qui permettra a 
l'internaute d'acceder a ces contenus. Choisissez done soigneusement 
vos micro-utilites en privilegiant celles qui interesseront votre persona. 

Prendre en compte les comportements lies a I'achat 

L'achat sur Internet n'est pas seulement une affaire de descriptions des 
produits. Vous devez aussi reflechir a la maniere dont les gens achetent 
le type d'articles que vous proposez. Observez a cet egard comment un 
site qui vend des billets d'avion peut integrer le processus classique 
d'achat d'un billet. 
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Anecdote Les acheteurs en ligne mettent 
du temps a se decider 

Une etude tres recente nous apprend qu'il se passe 
34 heures et 19 minutes (grossierement, entre 1 et 
2 jours) entre le moment ou I'internaute clique 
pour la premiere fois sur un site d'e-commerce et 
le moment oil il achete quelque chose sur ce meme 
site. Vous voyez done comme les parametres d'uti- 
lite sont primordiaux afin de le convaincre. 
Source : Marketing Sherpa 



Si votre persona voyage en couple, une fois qu'il a repere un vol interessant, 
il est fort probable qu'il aura besoin de le proposer a la personne qui l'accom- 
pagne. Si celle-ci n'est pas directement a ses cotes, il aura done besoin de lui 
envoyer un e-mail recapitulant les informations-cles du vol : date, heure 
et lieu de depart et d'arrivee, duree du vol, escales, prix, assurances, etc. 

Soit le site fournit une fonctionnalite pour faciliter cet envoi, soit il laisse 
l'ensemble du travail a la charge de son internaute, lequel, selon son niveau 
d'expertise, se debrouillera de trois manieres. Soit il telephonera a son 
conjoint pour lui parler du vol qu'il a repere et son interlocuteur essaiera de 
retrouver le meme vol en accomplissant une recherche sur le site. Soit il 
copiera l'adresse de la page pour la coller dans un e-mail (ce comporte- 
ment peut conduire a un echec si la page est creee de maniere dynamique 
en fonction des criteres de recherche, et n'a done pas d'adresse physique). 
Soit il fera une copie d'ecran pour la coller dans un e-mail (ce qu'il ne 
pourra realiser qu'avec un client mail logiciel et non dans des webmails de 
type Hotmail ou Gmail). Dans tous les cas, e'est beaucoup demander a 
I'internaute qui veut accomplir une action somme toute banale. 

Ici, l'utilite globale est d'acheter un billet d'avion, l'utilite secondaire 
d'envoyer les coordonnees du vol par e-mail. En proposant cette fonc- 
tionnalite, on tient compte du fait que l'achat d'un billet d'avion n'est 
pas toujours immediat et qu'il est souvent differe pour permettre aux 
protagonistes du voyage de s'accorder entre eux. 



Figure 7-15 Sur la page de detail d'un vol 

sur le site d'Air France, on ne propose 

aucun moyen aux intemautes pour envoyer 

ces informations par e-mail. 

Source : www.airfrance.fr 
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Figure 7-16 

Sur la page de detail d'un vol sur le site 
d'Opodo, les intemautes peuvent envoyer 
ces informations par e-mail grace a la fonc- 
tionnalite Envoyer la page par e-mail. 
Source : www.opodo.fr 



Prendre en compte les comportements lies a l'achat, e'est aussi integrer 
le fait que l'achat en ligne n'est pas forcement l'objectif ultime. II faut 
savoir qu'Internet est certes un vecteur de transactions directes, mais 
aussi un formidable vecteur de transactions indirectes. Les internautes 
viennent sur le Web pour obtenir des informations completes sur les 
produits, prendre le temps de choisir, de comparer. lis y decouvrent aussi 
des choses qu'ils vont acheter ulterieurement dans le monde reel. 

Fournir des micro-utilites orientees achat physique est d'autant plus 
important sur un site qui ne vend pas en ligne, afin de reporter l'acquisition 
chez ses revendeurs ou depositaires. Regardez ainsi comme cette micro-utilite 
sur le site de Nuxe est interessante : sur chaque fiche produit, on propose 
la Reference d fournir a votre pharmacien si vous ne trouvez pas le pro- 
duit. Ainsi, on donne l'idee aux internautes, s'ils ne trouvent pas d'emblee 
le produit en rayon, de le commander aupres de leur pharmacien. 



^J J ajcute a mes produits favoris 
^ Imprimer la fiche 
* Conseiller a un(e)ami(e) 



Referen ce a fouTn ir a votre pharma den si vous 
ne trouvez pas le prod u it : 
7365466 - FlacDn 1 00ml 
7365472- Flscon 50ml 



Figure 7-17 

Sur le site de Nuxe, la micro-utilite 
de reference produit permet 
de promouvoir l'achat en pharmacie. 
Source : www.nuxe.com 
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Preceder les interrogations des internautes 

Pensez aussi au fait que les micro-utilites ne sont pas uniquement des 
fonctionnalites. II peut s'agir d'ajouter des informations afin de devancer 
ou de satisfaire les interrogations de vos internautes. 

C'est notamment le cas sur le site de SpeakEveryday, qui propose un 
concept original au point qu'il suscite de nombreuses interrogations chez 
tous ceux qui le decouvrent. Cette societe propose des cours de conver- 
sation en anglais pour les enfants, qui recoivent un appel telephonique 
de leur professeur pendant 10 minutes chaque jour. 

L'utilite generale du site est que les gens viennent se renseigner ; le but 
avoue est qu'apres avoir consulte le principe, la methode pedagogique, le 
fonctionnement, ils s'inscrivent a ce service. Pour que les futurs clients 
soient rassures et puissent s'inscrire en toute confiance, en sachant ce 
qu'ils achetent, il est absolument necessaire de proposer une rubrique 
Questions/Reponses. 

Simplifier la tache des internautes en precedant leurs besoins fonctionnels 

Un dernier type de micro-utilite consiste a partir des besoins et des 
comportements de vos internautes pour leur simplifier la tache et anti- 
ciper leurs besoins. Quelques exemples vous permettront de comprendre 
ce type d'utilites. 

Quand Gmail repere une date dans un e-mail, il propose d'ajouter cette 
date a votre calendrier. Cette fonctionnalite vous evite d'effectuer vous- 
meme les actions suivantes : copie des details du rendez-vous dans le 
presse-papiers ou en memoire, ouverture de votre agenda, creation du 
nouveau rendez-vous avec les details contenus dans l'e-mail initial. 

Prenons un autre exemple. Sur le site d'Ergolab, chaque article est dis- 
ponible en version PDF. Or de nombreuses personnes qui decouvrent le 
site les telechargent un par un, afin de se construire une bibliotheque a 
lire en temps voulu. D'ou l'idee de packs d'articles, disponibles pour 
l'integralite des contenus (tous les articles en PDF) ou par rubrique 
(tous les articles de la section Pratiques par exemple). Cette fonctionna- 
lite a done ete implementee dans la seconde version du site : 

Figure 7-18 



r , lr x nrtr Vous pouvez aussi consuller la lisle de tous les articies 

Sur le site d Ergolab, une fonction de telecnargement de tous les articles au format PDF Ergoiabou lesiefehargerau format pdf: 



Tous Ibs aitfdfis d'Ergolab on PDF {6,20 Mo) 



permet de simplifier la tache des internautes. 
Source : www.ergolab.net 



AlloCine propose quant a lui une micro-utilite qui, l'air de rien, facilite 
grandement la vie de ses internautes. Recemment, on a ainsi vu appa- 
raitre sur le site la mention de l'heure de fin de seance (figure 7-19). 
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Frozen River 

Drama (1h 37min) 

De Courtney Hunt 

Avec Melissa Leo . Misty Upham 

Presse : xxx k Spectateurs : xxx k 
Deux femmes tentent de faire franchir la frontiere entre le 
Canada at lea Etats-Unis a das immigrants depeajrvusde 
papiers. 

SS Voir la bande-annonce 

Samedi 2 1 Cimanche 1 Lundi2 Mardi 2- 



en VO : 09:10 | 11:05 | OlOO I 14:55 I 16:50 I 18:45 I 20:45 I Reserver | 
22:45 Debut <Je la seance: 13:00 

Fin de la seance : environ 14:52 



Figure 7-19 AlloCine, en affichant I'heure 
de fin de chaque seance, precede le besoin 
d'information que peuvent avoir 
ses internautes a ce sujet. 
Source : www.allocine.fr 
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Cette information toute simple, mais essentielle, permet aux visiteurs de 
mieux faire leur choix, sans avoir besoin de calculer par eux-memes. 

En outre, cette micro-utilite est mise en place de maniere tees utilisable. 
En effet, les heures de debut et de fin de seance ne sont affichees qu'au 
survol de I'heure de la seance en question. Ainsi, l'interface de depart est 
aussi legere qu'auparavant, et on offre l'information utile a l'internaute 
precisement au moment ou il en a besoin. 

Notez que cette micro-fonctionnalite est particulierement interessante dans 
les actions de comparaison intra-cinema (par exemple : je compare les heures 
de fin de plusieurs films dans le meme cinema) ou inter-cinemas (par exemple : 
je compare les heures de fin du meme film dans plusieurs cinemas). 

Prendre en compte les potentialisateurs d'action 

Si vous travaillez sur un site de commerce en ligne, tenez compte de la 
grande importance que possede l'aspect financier dans la decision finale 
d'achat. Si votre internaute hesite entre deux sites qui lui paraissent 
equivalents, il choisira sans aucun doute celui qui lui propose la meilleure 
offre en termes commerciaux. 

Vous devez done vous renseigner sur les potentialisateurs d'achat qui 
decideraient vos internautes a acheter sur votre site. On ne parle pas seu- 
lement de prix, mais aussi de facilites de paiement, de livraison, de 
retours, de prise en compte de la fidelite, etc. 

Par exemple, le site de Sephora permet d'utiliser sa carte de fidelite en 
ligne comme en magasin, ce qui fournit ainsi une raison d'acheter sur le 
site de Sephora plutot que sur un autre. Par exemple, je peux acheter des 
produits La Sultane de Saba aussi bien sur le site de la marque que sur le 
site de Sephora, mais j'opterai plutot pour le second si je possede une carte 
de fidelite Sephora. Ce type de fonctionnalite peut etre lourd a mettre en 
place, mais 6 combien important pour la cible de ce genre de sites. 
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Dans la meme veine, on peut utiliser les cheques cadeaux Kadeos chez 
plusieurs grandes enseignes, a la fois dans les magasins et en ligne. Tous 
les sites Internet proposant ce moyen de paiement ne l'exploitent pas de 
la meme maniere, rendant ce dernier plus ou moins interessant pour 
l'internaute. II est, par exemple, beaucoup plus facile d'utiliser ses che- 
ques Kadeos pour payer sur le site de la Redoute ou de la Fnac que sur 
celui de Surcouf, ou Ton demande a l'internaute de les envoyer par cour- 
rier. Celui-ci peut etre suffisamment rebute par l'aspect contraignant de 
ce systeme pour preferer utiliser ses cheques cadeaux ailleurs. 



Figure 7-20 

Sur le site de Surcouf, on propose 

le paiement par cheques Kadeos, 

mais ce dernier n'est possible que 

par envoi des cheques par voie postale. 

Source : www.surcouf.fr 
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Figure 7-21 

Sur le site de la Redoute, on peut reellement 

payer en ligne par cheques Kadeos. 

Source : www.laredoute.fr 
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Dernier exemple : si vous souhaitez que votre internaute s'inscrive a 
votre lettre d'information, vous devez prendre en compte ce qui pourrait 
l'inciter a le faire. II ne s'agit done pas seulement de lui proposer de 
s'abonner, mais de lui indiquer les benefices qu'il pourra en tirer, et ce 
que cela signifie de s'inscrire a votre lettre. Expliquez a vos internautes le 
contenu de votre lettre, sa frequence d'envoi, donnez un exemple de la 
derniere lettre d'information, indiquez le nombre d'inscrits si cette 
donnee peut potentialiser l'inscription, fournissez votre charte de respect 
de la vie privee, etc. 

Pour enumerer vos contenus, exploitez toutes 
vos sources ! 

Une fois que vous avez une idee precise des differents niveaux d'utilite 
de votre site, le but est de reussir a enumerer l'ensemble des informa- 
tions, services et fonctionnalites que vous souhaitez proposer. A ce stade, 
ne vous preoccupez pas de la maniere dont vous allez les presenter. II 
sera bien temps de les ranger par la suite ! 

Paradoxalement, les gens qui souhaitent creer un site web disent souvent 
qu'ils s'occuperont du contenu lorsque le site sera pret. D'une part, n'en 
croyez pas un mot : ils auront alors bien d'autres preoccupations en tete 
et, pour finir, le site ne sera jamais reellement rempli. D'autre part, il 
faut bien comprendre que ce fonctionnement est contre-productif et 
risque d'aboutir a un site inadapte. 

Ce qu'il vous faut, e'est un site construit sur-mesure pour les contenus 
qu'il est cense accueillir. Le contenu est done le point de depart d'un site, 
ce sur quoi vous devez vous baser pour construire les fondations, puis la 
partie immergee. Commencer a concevoir un site sans idee de son con- 
tenu est le meilleur moyen d'obtenir un site qui n'est pas ergonomique. 

Attention, il ne s'agit pas forcement d'obtenir a ce stade l'ensemble des 
contenus finaux du site mais plutot une liste exhaustive des types de con- 
tenus et services que le site devra proposer. 

Si vous pouvez obtenir les contenus reels, e'est ideal mais plutot rare, 
voire impossible. Toutefois, si vous pouvez vous procurer un ou plusieurs 
exemples de chaque type de contenu, vous serez plus a l'aise et plus effi- 
cace pour penser a l'interface qui presentera ces contenus. En effet, dif- 
ferents types de contenus induisent differents types d'interfaces. Par 
exemple, la longueur d'un article, ses differentes parties, sa structure 
redactionnelle et son organisation type determineront sa presentation. Les 
interfaces les moins ergonomiques sont souvent celles qui sont generiques, 
prevues pour tout et n'importe quoi. 
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METHODOLOGIE Je n'arriverai jamais a avoir 

tous les descriptifs produit 6 mois avant 

la sortie du site... 

Enumerer les contenus, cela ne signifie pas que 
vous devez disposer des contenux finaux du site 
avant de commencer a I'organiser. 
Ce qui vous interesse a ce stade, e'est de prevoir le 
type de contenus et de prendre des exemples de 
reference (par exemple, un article a un auteur, une 
date, un resume, des mots-cles, un sommaire, un 
corps de texte, etc.). C'est grace a ces donnees que 
vous pourrez construire I'acces vers vos contenus 
(via I'architecture de I'information) et preparer leur 
consultation par I'internaute (via leur presentation 
sur la page). 
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Pour savoir ce que vous voulez heberger sur votre site, vous devez 
explorer toutes les pistes possibles. Retroussez vos manches, observez, 
analysez, interrogez les bons interlocuteurs et n'oubliez personne. Votre 
objectif est de dresser une liste des contenus que devra accueillir le site 
web. Pour atteindre cet objectif, quelques sources d'informations s'averent 
incontournables : 

• Le site existant 

Si vous travaillez sur un projet de refonte, l'ancien site est la premiere 
source d'information a analyser. II ne s'agit pas de reprendre les con- 
tenus tels quels, mais de vous en servir comme base pour decider si 
vous devez supprimer certains contenus, les ameliorer, les reecrire, les 
enrichir, etc. 

• Les acteurs du projet 

La seconde recommandation, lorsque vous cherchez a mettre au point 
le contenu, est de ne pas faire cavalier seul au risque de mettre sur 
pied un projet bancal. Tous les acteurs du projet doivent vous aider 
dans ce travail et ajouter leur vision a celle des autres. Quelques ses- 
sions de brainstorming peuvent etre un moyen efficace de recueillir 
rapidement les avis de tout le monde et de les confronter. 

• Vos concurrents 

Vous verrez dans la suite de ce chapitre qu'il est tres interessant de con- 
duire des analyses concurrentielles sur des sites comparables au votre, 
afin de ne pas vous enfermer dans votre propre vision des choses. 

• Les besoins supposes de vos internautes 

Se mettre a la place de vos internautes, afin de generer des idees de 
contenu et d'avoir un regard critique sur ce qui vous vient intuitive- 
ment en tant que concepteur, est egalement fructueux. La methode 
des personas (voir le chapitre 4) vous aidera a travailler sur les con- 
tenus a partir des missions des personas, de leurs objectifs lorsqu'ils 
visitent votre site. 

• Les besoins exprimes de vos internautes ou clients 

La derniere source d'informations provient de ceux qui sont directe- 
ment concerned, a savoir vos internautes. lis peuvent vous fournir des 
donnees incomparables sur leurs besoins en termes de contenus. 
Ainsi, de nouveau sur le site de SpeakEveryday les Questions/Reponses 
sont reellement celles exprimees par les clients (figure 7-22). Celles qui 
sont relayees en page d'accueil sont les plus frequemment posees. 

N'hesitez done pas a impliquer le service client dans votre strategic de 
recherche de contenus, afin d'avoir leur feedback sur les demandes et 
impressions de vos clients existants. 
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Figure 7-22 

Sur le site de SpeakEveryday, 
le contenu de la page 
Questions I Reponses est 
issu de veritables demandes 
revues au service clients. 
Source : 
www.speakeveryday.com 



Si votre objectif, a cette etape, est d'abord de reussir a cerner les types de 
contenus a presenter sur votre site, vous pouvez toutefois commencer a 
decider de la taille et de la composition respective de chacun de ces con- 
tenus. Dans ce cadre, il s'agit d'aller au-dela de « Chaque produit dis- 
pose d'une fiche ». Quelles informations cette fiche produit doit-elle 
contenir ? Repondre a cette question a cette etape du projet vous per- 
mettra de dresser une liste des contenus a preparer pour la sortie du site 
et donnera le temps aux responsables de conduire ce travail de prepara- 
tion. S'occuper du contenu d'un site est un travail a plein temps, souvent 
un travail d'equipe dans le cas de gros sites. C'est d'ailleurs in fine ce 
pour quoi on construit le site. II est done primordial de savoir precise- 
ment ce que Ton va y mettre et de se laisser le temps necessaire pour 
creer du contenu pertinent. 



Metier Redacteur web 



Ecrire pour le Web, c'est un metier. Si vous ne dis- 
posez pas d'un contenu redige specifiquement 
pour votre site, sachez faire appel a un redacteur 
afin qu'il vous aide sur ce plan. Surtout, ne trans- 
posez pas tels quels des contenus prevus pour 
d'autres supports (plaquettes, documents de pre- 
sentation, de demonstration, etc.). 
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Par exemple, imaginons que, d'apres une etude, la plupart des inter- 
nautes ne sont prets a acheter un jeu de societe a plus de 50 € sur 
Internet que s'ils peuvent voir le contenu de la boite. Vous devez alors 
vous debrouiller pour trouver, exiger, voire embaucher quelqu'un pour 
faire des photos des jeux deballes. Les editeurs disposent souvent des 
representations des jeux eclates pour leurs besoins commerciaux externes 
au site web. Ne menez done pas ce travail une seconde fois. Paradoxale- 
ment, les informations detaillees sur les produits existent souvent en 
dehors du site et ne sont pas relayees sur Internet. Ce n'est done pas un 
probleme d'ecriture ou de creation, mais de recuperation et d'adaptation 
des contenus. 

II y a souvent un fosse entre, d'une part les efforts que deploient les bouti- 
ques pour vendre des produits dans le monde physique et, d'autre part, le 
manque de preoccupation de la qualite des descriptifs produits sur le Web. 
Avant de mettre en avant des produits sous forme promotionnelle, on 
devrait veiller a ce que les fiches produit donnent les informations neces- 
saires a la prise de decision d'achat. II est d'ailleurs amusant de constater 
qu'on peut disposer de beaucoup plus d'informations sur un produit a 5 € 
que sur un autre a 500 € (voir a ce propos les figures 7-23 et 7-24)... 



Figure 7-23 

Tres peu d'informations sont fournies aux internautes 

qui voudraient acheter ce refrigerateur a 3 554 €. 

Source : www.electromust.com 



GENERAL ELECTRIC PCE23NGFBB610 
Refrigerateur americain 



^-^de technologie 



delai de livraison "j , jj max 




Prix livre lie de France : 3541 ,99€ 

Prix couramment pratique : 4599,99€ 

Reduction :-1Q58€ 

Eco participation : 13,00€ 

PrixtotalTTC:3554 1 99€ 

Garantie nationale 2 ans 



Volume net total 
Volume net retrigerateur 
Volume net congelateur 
Nombreifetoiles 
Distribution eau 
Autonomie congelateur 
Distribution glace 
Classs ensrg&tioue 
Couleur 
Dimensions 



671 litres 
413 litres 
253 litres 

oui 

heures 

oui 

B 

hox 

91L*175.9H*67.9P 



quantite 



i H 



Commander "tea 



m 



in 



<$> 







Imprimer 
cette fiche 



Conseils pour Comparer cet 
bier cholsir article 



Envoyer a 
un ami 



Les 

Bonnes 
affaires 



CG.V, 

Cr>nd. gen. 
de vente 



La qualite ergonomique d'un site tient beaucoup a la qualite de son con- 
tenu au fil du temps et de ses mises a jour. 

Au fur et a mesure de vos recherches, vous devriez prendre conscience de 
l'importance relative des contenus. Lorsque vous dressez une liste de ces 
derniers, pensez a les hierarchiser, a leur donner un ordre d'importance. 
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Champagne Bernard Figuet Brut Cuvee 
Speciale 



SaulcherV r bianc 
Champagne, France 




La Cuvee speciale de Bernard Figuet est de loin 
la meilleure vente de Champagnes dans sa 
categories En effet r vous etes des milliers 
chaque annee a reconnaltre en ce vin gourmand 
et bien equilibre Tun des meilleurs rapporbs 
prix-plaisir de toute la Champagne. Essence du 
cepage roi de la vallee de la Ma me - le Pi not 
Meunier -, issue des rares vignobles orientes 
Sud et beneficiant d'un grand ensoleillement r 
cette Cuvee speciale se distingue par sa 
complexite r son intensite r ses parfums frais de 
fruits blancs et d'agrumes et ses tres jolies 
rondeurs. Il merite amplement ses 2 etoiles au 
Guide Hachette des Vins ! 

Note 1355 ■ fffff 



Pour commander : 

18,40 iEURTTC 

Par bouteille (75 cl.) 



Livraison: -^f 

1. Saisissez le n ombre de 
bouteilles souhaite : S 
Disponible par muitipie tie 

6 bouteiiies. 

2. Cliques sur le bout on 
ci-dessous : 



(Vous poumez annuler par la suits) 



Plus d'in Formations 



L'avis du chateau : 



:-- = 



Autres millesimes : 
Appellation : 
Region : 



ne Bernard Figuet . Champagne Bernard Figuet « Cuvee Speciale * N.M. 
La perle rare de Champagne Exclusivite LS55 3 La cuvee speciale de Bernard 
Figuet est une exclusivite LS55. 3a production quasi conFidentielle et ses 
methodes de travail tres precises en font, de surcroit une excellente decouverte 
sur laquelle les amateurs de Champagne ne se trompent jamais. Ce champagne 
est produit principalement avec le cepage « roi » de la vallee de la Mame : le 
Pinot Meunier. Issue des rares vignobles parfaitement orientes (exposition sud]l f 
il apporte aux vins selectionnes rondeur r corpulence f et cet ensoleillement reve y 
ajoute complexity et intensite. Cette perle rare se distingue par sa bulla douce, 
sa robe doree intense et brillante f son bouquet de fruits blancs et d 'a grumes, 
ainsi qu'une longueur en bouche tres bien equilibree. Note 2 etoiles par le guide 
Hachette et cite par de nombreuses revues specialisees r ce champagne 
represente un rapport qualite-prix exceptionnel. Un champagne pour chaque 
instant 1 

Autres vins de Champagne Bernard Figuet 
Autres Saulchery 
Autres Champagne 



Autres informations 



Delais de Livraison 

Frais de Livraison : 
Conditionnement : 
Disponibilrte : 

Commande : 
Prix : 

Conservation : 
Prix aFFiches : 



^- 



■ 3 jours en Province f 5 jours en Europe, 

L9 r 90 euros par livraison ( Plus d'infos l 

Carton L855 

Sous deux a trois semaines. 

Par mutiple de S bouteilles 

Tous nos clients particuliers beneficient d'un prix hors taxes identiqi 

soit leur pays d'origine r a I 'exception de certains Chateaux. Beuls la 

sur les vins et frais de livraison varient en fonction du pays de livraii 

A attendre jusqu'en 2007 r eta deguster jusqu'en 2007, 

Le prix affiche est valable pour une livraison en : I I France 
Pour visualiser les prix dans un autre pays de livraison r cliguez ici . 



e r quelque 
TVA r taxes 



I 



Figure 7-24 

Des informations tres detaillees sont fournies 
aux internautes qui voudraient acheter 
ce champagne a 18€. 
Source : www.1855.com 



Que font les autres ? L'analyse 
concurrentielle en ergonomie 

Nous avons evoque precedemment une autre maniere de penser a des 
contenus et fonctionnalites interessants pour vos internautes : elle con- 
siste a « espionner » ce qui se passe chez les autres et c'est ce qu'on 
appelle une analyse concurrentielle. Attention cependant, l'analyse con- 
currentielle ergonomique n'a pas les memes objectifs qu'un benchmark 
dans le domaine marketing. Vous verrez dans la suite de ce chapitre 
comment elle s'en differencie. 
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Citation Un produit concurrent 
peut etre vu comme un prototype 

Pour Jakob Nielsen, I'analyse concurrentielle est 
tres interessante puisqu'elle permet de tester la 
maniere dont vos concurrents ont gere des proble- 
matiques comparables aux votres. Leur site 
devient ainsi une sorte de prototype du votre : 
« Existing, perhaps competing, products, are often 
the best prototypes we can get of our own 
products » (Les produits existants, qui peu- 
vent etre concurrents, sont souvent les 
meilleurs prototypes de nos propres pro- 
duits dont nous puissions disposer) - Jakob 
Nielsen, inspire de Byrne, 1989. 



La demarche de I'analyse concurrentielle 

Quel que soit le niveau auquel vous souhaitez mener une analyse con- 
currentielle, vous devez prendre en compte quelques grands principes 
avant de commencer. II faut notamment choisir la maniere dont vous 
allez proceder et les sites que vous allez analyser. 

Principes de base de I'analyse concurrentielle 

L'idee consiste a aller regarder chez les autres ce qui pourrait etre inte- 
ressant pour votre site. Autrement dit, il s'agit d'ouvrir votre esprit. For- 
cement, d'autres personnes dans d'autres contextes, avec leurs objectifs, 
leur personnalite, leur imagination, auront pense a des choses differentes 
de vous. Allez done regarder quels sont ces points et s'ils sont interes- 
sants a mettre en place sur votre site. 

L'analyse concurrentielle est une demarche que la plupart des concep- 
teurs mettent en ceuvre de maniere intuitive : il parait logique, lorsqu'on 
cree un site dans un domaine donne, d'aller voir ce qui se pratique dans 
le domaine en question. En outre, on exerce I'analyse concurrentielle de 
maniere informelle en permanence, a mesure que Ton navigue sur le 
Web et que Ton est confronte a differentes interfaces. En se tenant au 
courant de ce qui se fait, on developpe ses capacites a penser a de nou- 
velles presentations de l'information sur le Web. 

L'analyse concurrentielle peut cependant etre plus poussee que cette 
demarche intuitive. Conduite de maniere formelle, elle consiste a ana- 
lyser un panel de concurrents dans l'objectif de creer ou de refondre un 
site web. L'analyse concurrentielle est tres appreciee de tous les concep- 
teurs car elle presente un rapport qualite/prix imbattable. Par la diversite 
des idees quelle permet de recueillir, elle reproduit une partie des bene- 
fices d'un brainstorming. En outre, elle permet de se servir des erreurs 
des concurrents. 

Une analyse concurrentielle formelle ne consiste pas simplement a jeter 
un coup d'oeil sur chacun des sites du panel. Vous devez analyser ces sites 
sur une base commune. II est done essentiel d'etablir un ensemble 
d'actions que vous conduirez sur chaque application ou site concurrent. 
Vos personas vous fourniront les actions les plus critiques a evaluer. Vous 
devez essayer de realiser leurs missions sur l'ensemble des sites analyses. 

Vous devez done construire des scenarios d'utilisation, a repeter sur 
chacun des sites. II faut que le scenario teste puisse etre realise sur tous 
les sites choisis. II est done parfois difficile d'etre tres precis dans le sce- 
nario d'utilisation a mener. Ainsi, ce dernier peut etre aussi large que 
Acheter un article sur le site. 
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Au fur et a mesure de vos parcours sur les sites, vous allez relever les 
points positifs et negatifs de chacun d'eux. Attention, le principal interet 
d'une analyse concurrentielle consiste a s'inspirer de ce que vous voyez, 
done des points positifs. Vous devez tenir compte des points negatifs 
uniquement si votre objectif est de mettre le doigt sur une erreur a eviter 
a tout prix et si votre rapport d'analyse concurrentielle doit servir a 
d'autres que vous. Autrement dit, il ne s'agit pas de conduire des audits 
des sites de vos concurrents mais bien de trouver rapidement ce qui 
pourrait s'averer interessant dans votre contexte. 

Le plus souvent, 1' analyse concurrentielle est mise en ceuvre sous la forme 
d'une analyse, par un expert, des sites du panel. II peut toutefois etre fruc- 
tueux de coupler cette demarche avec une methode plus participative. 
Ainsi, si vous travaillez sur une creation de site, mener des tests utilisateur 
sur les sites de vos concurrents peut se reveler tres profitable : vous obser- 
verez ainsi la maniere dont les internautes naviguent sur ces sites. 

Definissez votre panel concurrentiel 

Qui sont vos concurrents ergonomiques ? 

Pour conduire une analyse concurrentielle, il faut d'abord mettre au 
point le panel des sites a analyser. Lorsqu'on entend le mot « analyse 
concurrentielle », on imagine souvent que celui-ci sera compose de sites 
qui font la meme chose que nous. C'est faux. Un concurrent d'un point 
de vue ergonomique est quelqu'un a qui vous allez pouvoir vous comparer, 
plutot qu'un concurrent sur le plan commercial. 

Par exemple, si votre site doit vendre de l'electromenager, il est certes 
tres interessant, mais insuffisant, d'analyser d'autres sites commerciali- 
sant ce type de produits. En effet, deux grandes dimensions caracteri- 
sent votre site web : 

• Le theme de votre site. Par exemple, le pret-a-porter, la litterature, la 
musique, la radio, la cuisine, l'immobilier, etc. 

• Le type de site. C'est-a-dire ce qu'il propose de faire (site editorial, site 
de vente en ligne, site communautaire, site de divertissement, etc.) 

II faut prendre en compte ces deux dimensions lorsque vous determinez 
le panel de sites a analyser. Vous devez done non seulement etudier des 
sites qui se rapprochent du votre (puisque vous abordez le meme theme) 
mais aussi des sites qui vous ressemblent uniquement dans la forme, 
dans le type d'action qu'ils induisent chez les internautes. 

Si Ton revient a votre site d'electromenager, vous allez done analyser les 
sites qui vendent le meme type de produits, mais aussi d'autres sites de 
vente en ligne. Ces derniers presentent en effet une interface et des flux 
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d'interaction comparables au votre : presentation d'un catalogue de pro- 
duits, selection d'un article, liste de produits, fonctionnalites de recherche, 
fiche descriptive, processus d'achat, processus d'inscription, etc. 

Pour prendre un autre exemple, si votre site propose la reservation de 
billets d'avion, vous allez analyser d'une part d'autres sites qui proposent 
de reserver des vols, mais aussi d'autres sites plus larges permettant de 
reserver des voyages, des trajets de train, de bateau, etc. 

Enfin, il faut savoir que conduire une analyse concurrentielle sur un site 
web grand public est souvent plus facile que dans le domaine de l'appli- 
catif, puisque les interfaces sont plus facilement accessibles. 

Combien de concurrents devez-vous analyser ? 

Lorsque vous mettrez au point le panel des sites a analyser, vous serez 
confronte au fait que celui-ci doit comporter un nombre fini de sites, et 
que ce nombre doit etre decide avant de commencer. Vous ne pouvez 
evidemment pas analyser tout Internet pour concevoir le meilleur site 
possible. Sachez etre raisonnable et choisissez les sites les plus appro- 
pries pour mener votre analyse. 

Au-dela de 10, vous allez probablement trop vous disperser. Composez 
votre panel a la fois de veritables concurrents commerciaux et d'inter- 
faces comparables sur le plan ergonomique, et privilegiez les plus impor- 
tants. Deux types de concurrents peuvent y etre representes : 

• Des sites reconnus, tees frequentes. Ce seront probablement ceux que 
vos internautes iront visiter pour mener des actions de comparaison. 
Vous devez done absolument prendre en compte leur maniere de faire. 

• Des sites qui ne sont pas forcement tees connus du grand public, mais 
que vous savez innovants du point de vue de l'interface. Pour decider 
de cette partie du panel, vous devez tees bien connaitre le Web et ce 
qui s'y passe. Plus vous serez confronte, dans votre quotidien, a diffe- 
rents sites web, plus vous verrez de choses, plus vous pourrez etablir 
un parallele avec votre propre travail. 



Definition Analyse concurrentielle 
generate et utilite 

L'analyse concurrentielle generale s'occupe de I'uti- 
lite du site : elle a pour objectif d'observer ce que 
les sites du panel fournissent a leurs internautes en 
termes d'informations et de fonctionnalites. 



Analyses concurrentielles generates 

Les analyses concurrentielles peuvent etre differenciees en fonction de 
leur niveau de detail. En general, une analyse concurrentielle se conduit 
a la fois d'un point de vue general et d'un point de vue detaille. Com- 
mencons par evoquer ce que recouvre une analyse generale. 

L'analyse concurrentielle generale est celle par laquelle on commence. 
C'est une analyse de haut niveau au sens ou elle s'interesse exclusive- 
ment aux grands principes adoptes par les sites du panel. Dans ce cadre, 
on peut dire que l'analyse concurrentielle generale traite du critere 
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d'utilite. Elle va s'interesser aux types de contenus, fonctionnalites, 
services offerts, aux grands choix de presentation de ces contenus, aux cles 
d'entree proposees aux internautes, etc. 

L'analyse concurrentielle generale traite aussi bien de l'utilite generale 
que des micro-utilites. Vous devez analyser, d'une part, ce qui est pro- 
pose aux internautes, d'autre part, la forme privilegiee pour presenter 
cette offre. A ce niveau d'analyse, vous pouvez integrer dans le panel des 
sites internationaux, qui ne sont pas diffuses dans la meme langue que le 
votre. En effet, le vocabulaire utilise n'a pas d'importance a ce stade 
d'analyse. II s'agit veritablement d'etudier la presentation generale plutot 
que les points detailles. Prenons trois exemples. 

Exemple : cles d'entree dans un catalogue 

Si on prend 3 sites differents permettant aux internautes de telecharger 
des singles et sonneries, on peut distinguer trois grands types de naviga- 
tion dans les catalogues. D'une part, SFR Music propose d'entrer par 
produit (on commence par rechercher Madonna avant de choisir si Ton 
souhaite acheter un morceau audio ou une sonnerie). D'autre part, 
Virgin Mega choisit de presenter les deux options dans des rubriques 
differentes (on commence par choisir la rubrique Mobile, pour aller 
ensuite chercher une sonnerie de Madonna), mais prevoit des liens 
transversaux entre les deux rubriques (sur la fiche d'un single, on dispose 
d'un raccourci pour acheter la sonnerie correspondante). Enfin, Orange 
choisit de proposer les deux dans deux rubriques (voire dans deux sous- 
sites) totalement independants : le Jukebox (pour les singles) et la rubrique 
Mobile & Fun (pour les sonneries). 

La solution du site de SFR favorise la vente multi-canal, l'ouverture vers 
differents supports, mais demande necessairement un catalogue homo- 
gene sur les differents formats, sous peine de decevoir l'internaute. La 
solution adoptee par Virgin Mega convient a la fois aux exigences de la 
vente multi-canal et a l'eventualite d'un catalogue heterogene. Enfin, la 
solution du site d'Orange est plus adaptee si le catalogue des sonneries 
est tees different de celui des singles. 

Exemple : principe general de navigation 

L'analyse concurrentielle peut aussi etre interessante pour s'inspirer de 
principes de navigation. Prenons l'exemple du site d'Endless, qui permet 
de parcourir un catalogue de chaussures en restant toujours sur la meme 
page : cette derniere est rechargee en temps reel en fonction des criteres 
selectionnes sur la colonne de gauche de l'ecran. Ce principe d'exploration 
peut etre interessant pour n'importe quel site presentant un ensemble 
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d'elements definis par un jeu de criteres dans lequel l'internaute effectue 
une recherche. 



Figure 7-25 

Sur le site d'Endless, la selection de criteres en 

colonne de gauche permet d'afficher la liste 

des chaussures correspondantes dans le centre 

de la page. 
Source : www.endless.com 
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Ce n'est done pas parce que ce principe de navigation est utilise dans le 
contexte des chaussures que vous ne pouvez pas vous en inspirer dans un 
tout autre domaine. 

Exemple : micro-fonctionnalite de navigation 

Nous venons d'evoquer comment l'analyse concurrentielle peut per- 
mettre de travailler sur le principe general de presentation d'un site. Elle 
peut aussi permettre de decouvrir des fonctionnalites plus complemen- 
taires, notamment dans le domaine de la navigation. 

Si Ton prend l'exemple du nuage de tags, e'est un principe de navigation 
qui peut s'appliquer a des types de sites tres differents. 
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Tags 

asperge asperqes 

avocat b^tterav^ chevre 
dips dedicace 

estraqon fraise tm 

lotte manque noemie 

orange 

pamplemousse patate 

douce pois chiche 

qdj qotd ricotta 

Voir mes tags 



Figure 7-26 Nuage de tags 

sur le site de Trois potes au feu. 

Source : troisgourmandes.vox.com 



Tags des utilisateurs (voirpius) 

alternative experimental female 
VOCaMstS folk freak folk 
I nCI 16 new weird america seen live 



o 

i 



Figure 7-27 Nuage de tags sur le site de LastFM. 
Source : www.lastfm.fr 



LES ARTICLES PREFER! S DES INTERNAUTES _ 



-> Test psychologique -> 5aiads$ -> Parf™ -> Maquillage -> Cuisine -> Chans sure s 

-> Celllllite -> Stars -> Tendances -> Regime -> Infldelite -> Astro -> Test amour -> 

Lingerie -> Mine™ -> Horoscope -> Tests -> jeu^oncours -> Sexualite -> 
Numeroiojie -> Dsssert -> Tarot -> Coiffure -> Robe de maiiee -> chocoiat -> 

Chignon mariee -> JeailS -> Maillot d= bain -> Coupe de cheveilX -> Petitsprix -> 
ReCetteS -> RBesttssminceur -> Auto-hmazants -> CoifEire mariage -> Astrologie 



Figure 7-28 

Nuage de tags sur le site de Marie Claire. 
Source : www.marieclaire.fr 



Le nuage de tags permet d'offrir une navigation par themes. Plus le 
nombre d'elements auxquels le tag est attache est eleve, plus le titre du 
tag est ecrit gros. Cette navigation peut s'appliquer a n'importe quel 
domaine, et venir appuyer d'autres principes de navigation (recherche, 
listes, categorisation, etc.). 

Peu importe le sujet dont on traite, l'essentiel est de disposer d'un 
ensemble d'elements de meme type (des groupes de musique, des arti- 
cles, des posts) auxquels on peut attacher des tags (folk, coiffure, 
estragon). Une analyse concurrentielle formelle ou informelle peut vous 
aider a decouvrir ce genre de fonctionnalites et a vous en inspirer pour 
votre propre site. 

Exemple : descriptifs produits 

L'analyse concurrentielle est aussi tees interessante pour decider du 
niveau de detail des descriptifs produits de votre site. Prenons un 
exemple. Vous voulez vendre du fond de teint en ligne ? Allez done faire 
un tour chez ceux qui le font deja et observez : quelles sont les diffe- 
rentes manieres de presenter un fond de teint pour potentialiser l'achat ? 
Quel est le minimum conventionnel ? Quels sites sortent du lot ? 
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Pouvez-vous vous permettre d'en faire autant ? Pouvez-vous vous en ins- 
pirer sans aller aussi loin ?, etc. 

Pour illustrer cet exemple, observez le niveau de detail fourni aux inter- 
nautes dans le descriptif d'un coloris de fond de teint sur les sites dTves 
rocher, de Clinique, ou du Club des Createurs de Beaute. 



Figure 7-29 

Sur le site d'Yves Rocher, 

les coloris de fond de teint ne sont visibles 

que via des vignettes de couleurs. 

Source : www.yves-rocher.fr 



Figure 7-30 

Le site de Clinique propose en plus des vignet- 
tes de couleurs une photographie du produit 
sorti du tube. 
Source : www.clinique.fr 
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Figure 7-31 

Le site du Club des Createurs de Beaute 
propose grace a son make-up testeurune veri- 
table fonctionnalite d'application des coloris 
sur le visage d'un modele. 
Source : www.ccbparis.fr 
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Definition Analyse concur rent ielle 
detaillee et utilisabilite 

L'analyse concurrentielle detaillee s'occupe de I'uti- 
lisabilite du site : elle a pour objectif d'observer 
comment les sites du panel concurrentiel presen- 
ted leurs informations et fonctionnalites. 



Analyses concurrentielles detaillees 

Le second niveau d'analyse concurrentielle doit vous permettre de tra- 
vailler sur le detail des interfaces du panel. Alors que l'analyse concur- 
rentielle generale traitait essentiellement du critere d'utilite, l'analyse 
detaillee s'occupera de ce qui touche a l'utilisabilite. En effet, une fois 
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que vous avez recense ce que les sites web presentent, il faut analyser 
comment ils le font. Dans ce cadre, vous avez trois objectifs : 

• Copier les bonnes idees ou vous en inspirer. 

• Reperer les conventions de presentation et de fonctionnement. 

• Reperer les conventions terminologiques. 

Vous ne devez done pas seulement choisir la solution qui vous parait la 
plus adaptee en termes de facilite d'utilisation absolue, mais tenir 
compte des conventions. En effet, les internautes qui viendront sur votre 
site peuvent s'attendre a ce que vous utilisiez les memes principes et les 
memes termes que ce qu'ils ont deja rencontre sur le Web. Si vous uti- 
lisez ces conventions, vous vous assurez que l'interface leur semblera 
intuitive et logique. 

Dans le domaine du vocabulaire utilise sur votre site, vous devez veiller a 
deux dimensions : 

• Conventions terminologiques d'interface 

Par exemple, si vous souhaitez permettre aux internautes d'enregis- 
trer des articles de votre site dans leur compte utilisateur, ann de les 
retrouver par la suite, vous devez trouver le terme le plus approprie 
pour qu'ils le comprennent. Observez comment les sites tres fre- 
quentes nomment cette fonctionnalite : Vos listes de favoris chez 
Alapage, Ma Pix'liste chez Pixmania, Ma selection chez la Fnac, Vos 
Z'envies Cadeaux chez Amazon. 
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Figure 7-32 

La fonctionnalite de selection d'articles dans une liste personnels 
est nommee differemment sur les sites d'Alapage, de Pixmania, 
de la Fnacetd'Amazon. 

Sources : www.alapage.fr / www.pixmania.com / 
www.fnac.fr / www.amazon.fr 



Effectuer ce recensement vous permettra de savoir si vous pouvez 
vous affranchir des conventions ou si vous etes oblige d'adopter un 
terme en particulier. Ce sera notamment le cas si tout le monde 
s'accorde sur un terme. Pas la peine alors de chercher plus loin, meme 
si ce terme n'est pas ideal dans l'absolu. II devientlz terme ideal parce 
que les internautes le connaissent. Meme si l'homogeneite n'est pas 
remarquable, veillez a ne pas trop vous eloigner de ce qu'ont deja pu 
rencontrer vos internautes. Par exemple, le terme Liste de remarque 
utilise sur le site d'Esprit est tres mal choisi et on a l'impression qu'il 
pourrait correspondre a des articles mis de cote. Or il represente 
l'historique des articles consultes sur le site. 
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• Conventions terminologiques d'un domaine 

Si votre site appartient a un domaine particulier et qu'il existe 
d'autres sites appartenant a ce domaine, allez les voir pour etudier le 
vocabulaire qu'ils utilisent. Si tous s'accordent, encore une fois, vous 
devez vous plier a la regie du plus grand nombre. 

Par exemple, la plupart des sites proposant d'acheter des ecrans utilisent 
le mot Ecrans (c'est le cas chez Surcouf, Darty, La Fnac, Pixmania). Le 
site Rue-montgallet nomme sa rubrique Imagerie, ce qui oblige l'inter- 
naute a chercher, voire a penser que ce site ne propose pas d'ecrans. En 
outre, s'il a l'idee de cliquer sur Imagerie, il ne voit toujours pas le mot 
Ecran mais Moniteur. Bien sur, s'il veut a tout prix trouver un ecran et 
sait que le site en propose, il devrait y arriver, mais non sans peine, apres 
avoir essaye plusieurs rubriques et s'etre interroge sur la plus appropriee. 

A l'inverse, savoir que personne ne s'accorde sur le terme a privilegier 
vous permet aussi de choisir plus sereinement le mot qui vous parait 
ideal. Prenez ainsi l'exemple du domaine automobile et de la grande 
diversite de termes pour consulter la liste des voitures d'une marque 
donnee : Camme et Vehicules chez Renault et chez Nissan, Gamme 
chez Volvo, Opel et Audi, Les vehicules chez Peugeot, Modeles chez 
Volkswagen et chez Fiat, Showroom et modeles chez Toyota... 

Linterpretation des observations d'une analyse concurrentielle est par- 
fois difficile, notamment lorsqu'il existe une petite heterogeneite et que, 
par exemple, votre panel se divise en 3 suivant les choix de chacun des 
sites. Soyez aussi conscient de ce point : ce n'est pas parce qu'un seul site 
utilise un mot que cela devient une convention, mais cela peut etre le cas 
si ce site detient la quasi-totalite des parts de marche. 

Enfin, lorsque vous decidez de copier un element que vous avez vu ailleurs 
ou de vous en inspirer, verifiez bien si votre concurrent dispose d'un brevet 
et s'il est connu pour etre intraitable sur le plan juridique. La replication 
trait pour trait est plus dangereuse pour des micro-fonctionnalites ou Ton 
copierait a la fois le principe et le nom (du type One-click d'Amazon) que 
pour de simples mots. Le Web est par nature un support qui tend a 
s'homogeneiser et c'est de cette maniere que les internautes deviendront 
de plus en plus efficaces. II est done plus ou moins entre dans les mceurs 
que les sites concurrents s'observent, se jaugent et se copient. 

Ne considerez cependant pas l'analyse concurrentielle comme une methode 
ideale se suffisant a elle-meme. Couplez-la a d'autres methodes ergono- 
miques telles que celles evoquees dans ce livre. II est essentiel que l'ana- 
lyse concurrentielle ne constitue qu'une partie de votre travail, ou vous 
risquez de rester coince a repliquer ce que font les autres. Sachez tirer les 
meilleurs benefices de cette demarche pour vous lancer et deployer votre 
imagination sur de bonnes bases. 
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Oum Benchmarkr 

Un outil tres performant pour vous accompagner dans votre analyse concurrentielle, rea- 
lise par des Frangais. Actuellement en version alpha, c'est un applicatif tres prometteur, 
qui vous sert a la fois a saisir vos donnees, a en tirer des conclusions et a produire des 
resumes et representations graphiques. 
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Ajoutez a cela des fonctions de partage des documents, et vous avez un outil vraiment 
utile pour travailler sur des analyses concurrentielles. 
B http://alpha.benchmarkr.com 
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L'analyse concurrentielle a pour objectif de bien connaitre le contexte 
concurrentiel arm d'agir en bonne intelligence, en respectant les conven- 
tions et en trouvant des moyens de faire la difference. Vous ne pourrez 
trouver ces moyens que si vous savez ce que font vos competiteurs, mais 
ce n est que le debut de votre reflexion ! 
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Architecturer I'information 



et les interactions 



Le Web est un immense reservoir de contenus dans lequel 
les internautes piochent pour arriver a leurs fins. Ann 
de les aider, les concepteurs de sites web doivent optimiser 
l'organisation de leur site, autrement dit architecturer 
I'information. 



SOMMAIRE 

► Les objectifs de I'architecture 
de I'information 

► Les activites de recherche 
et de navigation 

► Sources d'inspiration pour 
architecturer I'information 

► Concevoir I'architecture de 
I'information et les parcours 
clients 

MOTS-CLES 

► Architecture de I'information 

► Navigation 

► Plan de site 

► Categorisation mentale 

► Strategies de recherche 

► Trouvabilite 

► Parcours client 

► Flux d'interaction 



L'architecture de 1'information d'un site web se definit comme la 
maniere d'y ranger les donnees. Comme dans la vie reelle, lorsque c'est 
mal ordonne, il est difficile de mettre la main sur ce que Ton cherche. 



Definition 
Architecture de 1'information 

1 . Organisation d'un systeme de contenu. 

2. Discipline qui traite de I'organisation des sys- 
temes de contenu. 



Ranger pour aider a trouver 

Imaginez que vous cherchez votre disque prefere dans une chambre sens 
dessus-dessous. Vous soulevez des piles de vetements, verifiez sous le lit, 
derriere l'armoire, vous ne trouvez pas votre disque. Enerve, vous aban- 
donnez et maudissez votre manque d'organisation. 

Sur le Web, les defauts d'organisation sont une des principales raisons pour 
lesquelles on trouve un site complique ou mal concu. Les difficultes de 
navigation sont d'ailleurs celles eprouvees le plus souvent par les inter- 
nautes. Elles renvoient a un scenario classique que tout le monde a deja 
experimente : vous etes sur un site Internet, vous ne trouvez pas ce que vous 
voulez, vous vous enervez, vous quittez le site. Vous n'y reviendrez plus ! 

Ce type de comportement est tres frequent. II est d'autant plus inquie- 
tant lorsque 1'information recherchee est disponible, mais cachee dans 
un coin obscur ou l'utilisateur n'aura pas l'idee d'aller voir. En tant que 
concepteur, vous devez eviter a tout prix que les internautes ne quittent 
votre site alors meme que vous disposez du contenu qu'ils recherchent. 

De maniere complementaire, si ce qu'il recherche n'est pas disponible 
sur votre site, l'utilisateur doit pouvoir sen rendre compte. S'il s'en aper- 
coit rapidement, cela lui evitera de perdre de temps a parcourir toutes les 
pages pour rien. 

Pour repondre a ces objectifs, vous devez trouver la meilleure maniere de 
structurer les contenus en fonction des attentes qu'ont vos clients 
lorsqu'ils consultent votre site. C'est cette organisation que Ton appelle 

Y architecture de V information. 

Vous pouvez considerer l'architecture de 1'information comme les fonda- 
tions de votre site Internet. De la meme maniere qu'on construit une 
maison ou un immeuble sur plan, on doit construire un site sur une 
structure solide (figure 8-1). 

Si Ton ne risque pas de voir s'effondrer un site mal organise, on peut 
cependant craindre que ses visiteurs peinent a atteindre leurs objectifs, 
quittent le site et/ou aillent voir ailleurs. 

Reprenons le fil conducteur du travail de conception web : une fois que 
vous avez plein de choses a dire, vous devez choisir comment les pre- 
senter, comment ranger tous vos services et informations pour les mettre 
a la disposition de vos internautes sous la forme d'un site web. 
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Figure 8-1 Les plans de maison et les plans de site ont une vocation commune : 
preparer le terrain pour que votre projet soit le plus viable possible. 
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Lorsque l'organisation d'un site leur parait logique, les utilisateurs sont 
plus disponibles pour en decouvrir le contenu. En effet, n'eprouver 
aucune difficulte pour naviguer sur un site permet de dedier ses res- 
sources mentales a la lecture et l'appreciation de son contenu. De 
maniere generale, si les internautes ne parlent pas de l'organisation de 
votre site, c'est quelle leur parait evidente et c'est bon signe ! 

Dans la plupart des projets web, on veut trop souvent avoir un apercu du 
design graphique avant meme de savoir ce que contiendra le site et de 
quelle maniere on va l'organiser. Ainsi, s'il est impossible de commencer 
a peindre les murs du salon avant d'avoir construit sa maison, c'est au 
contraire une pratique frequente dans le domaine du Web. 

Puisque l'architecture d'un site doit etre concue suivant la maniere dont 
les internautes vont chercher l'information, vous devez vous baser sur ce 
qu'ils font en general et ce qu'ils feront sur votre site en particulier. Plu- 
sieurs sources d'informations peuvent vous aider a cerner et a prevoir ces 
comportements. Commencons par essayer de comprendre toutes les 
manieres de parcourir un site web. 



Figure 8-2 

Votre objectif : passer d'un ensemble de contenus indifferencies a 
un site internet organise dans le but de satisfaire ses utilisateurs. 



Point de vue utilisateur Les phrases qui alertent 

Un travail pousse est a mener du cote de l'archi- 
tecture de l'information lorsque vous entendez des 
choses du type : « Je suis perdu », « Je ne m'y 
retrouve pas », « Ou est-ce qu'ils ont pu mettre 
ca ? », « J'ai I'impression d'etre deja passe par 
ici », etc. 



METHODOLOGIE Et si je saute cette etape ? 

La phase de reflexion autour de la structuration 
des contenus est trop souvent considered comme 
optionnelle. Lorsqu'elle est negligee, on obtient 
des sites fouillis, ou les gens se sentent perdus et 
ne trouvent pas ce qu'ils desirent. 
Tous les sites ont besoin d'un travail sur l'architec- 
ture de l'information, quels que soient leur taille 
ou leur type (Internet, intranet, extranet). Cepen- 
dant, dans la plupart des cas, plus le site est etoffe 
au niveau de I'offre d'informations et de services, 
plus les problematiques d'architecture seront com- 
plexes a traiter. 

Vous ne pouvez pas tout mettre en tas et esperer 
que vos visiteurs trouveront ce qu'ils cherchent. II 
faut les guider pour qu'ils atteignent leur but faci- 
lement et rapidement. 
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Comment visite-t-on un site Internet ? 

On distingue 3 grands types d'explorations du contenu d'un site : 

La recherche par mot-cle : droit au but ! 

Ce type d'activite est supportee par un moteur de recherche. Celui-ci 
permet de passer outre l'arborescence d'un site, soit parce que cette der- 
niere est defaillante, soit parce que la recherche par mot-cle est la stra- 
tegic privilegiee par l'internaute dans un contexte precis. 

Attention a ne pas considerer la recherche comme une solution de 
secours suite a un echec de navigation. En effet, une partie des inter- 
nautes se sert systematiquement du moteur de recherche avant meme 
d'essayer de localiser l'information en naviguant. 

L'ergonomie des moteurs de recherche est un theme qui pourrait occuper 
un ouvrage entier. Vous devez etudier la presentation de cette fonctionna- 
lite a l'ecran, mais ce nest pas tout. Vous devez aussi vous preoccuper de 
son utilite et de son fonctionnement. Pensez d'abord a vous demander si 
vous avez besoin d'un moteur de recherche et, si c'est le cas, pourquoi ? 
(quels objectifs utilisateur le moteur de recherche va-t-il satisfaire ?) 

Ensuite, vous devez specifier le fonctionnement du systeme de 
recherche, toujours en fonction des besoins de vos internautes (quels 
contenus le moteur indexe-t-il ? Quels sont les grands principes de 
l'algorithme de recherche ? Devez-vous prevoir un dictionnaire de mots 
interdits ? De mots comparables ? Sur la base de quelles sources ?, etc.). 

Enfin, vous devez reflechir a la presentation des resultats et aux manieres 
d'aider l'internaute a preciser, modifier ou elargir sa recherche. Notez 
que, si vous n'avez pas les ressources necessaires pour concevoir un bon 
moteur de recherche, il peut etre preferable de ne pas en proposer. 



VOCABULAIRE Synonymes ou presque 

On peut presque parler indifferement de naviga- 
tion globale, principale ou primaire. 
Ce qui difference la navigation globale des deux 
autres, c'est qu'elle peut faire reference a des ele- 
ments mineurs mais presents sur toutes les pages 
d'un site (par exemple : les rubriques presentes de 
maniere conventionnelle dans le pied de page, de 
type Mentions Legates, Espace presse, Conditions 
generates de vente, etc.). 



La navigation ciblee : etape par etape 

Cette activite consiste a parcourir l'arborescence d'un site a la recherche 
d'un contenu precis. Elle est facilitee par une structuration des contenus 
adaptee a la representation que sen fait l'utilisateur. 

La plupart des principes que nous evoquons dans ce chapitre servent a 
optimiser ce parcours de lien en lien vers un contenu final. Deux types 
d'elements de navigation sont particulierement adaptes a ce parcours de 
l'arborescence. 
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Support : la navigation globale, un repere persistant 

La navigation globale, ce sont les elements de navigation qui se retrou- 
vent a travers tout le site et sont accessibles en permanence, quelle que 
soit la page consultee. 
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Figure 8-3 Les items Accueil, Multimedia, Telephonie, Image & Son, Gros Electromenager, etc., font partie de la navigation globale du site Darty. 
Les internautes les retrouvent sur toutes les pages, oil qu'ils soient dans le site, lis peuvent done les considerer comme des reperes 
de navigation et moins craindre de faire des erreurs dans leur parcours, puisqu'ils disposeront toujours de cette navigation en cas de besoin. 
Source : www.darty.fr 

Support : la navigation locale, fille de la navigation globale 

La navigation locale est un type de navigation qui s'adapte en fonction 
de la rubrique de navigation globale consultee (d'ou le terme de 
« locale » : son contenu change en fonction du lieu ou Ton se trouve). En 
termes de hierarchie, elle depend de la rubrique sur-ordonnee et permet 
de s'enfoncer plus profondement dans un site. 
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Figure 8-4 Dans cet exemple, nous sommes en train de visiter la rubrique Les filles du site Petit Bateau 
(e'est I'element de navigation globale) et la sous-rubrique des T-Shirts (e'est I'element de navigation locale). 
Source : www.petit-bateau.com 
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La navigation libre, ou comment se promener sur le Web 



BlBUOGRAPHlE The Polar Bear 



Si vous ne devez en lire qu'un, c'est celui-ci. Le 
Polar Bear (comme I'appellent ses fans en refe- 
rence a I'ours polaire illustre en couverture) est la 
bible de I'architecture de I'information. Paru dans 
sa 3 e edition fin 2006, il est ecrit par deux super- 
experts, et traite le sujet en profondeur. 
Information Architecture for the World 
Wide Web s'interroge ainsi sur la maniere de 
traiter les quantites gigantesques d'informations 
qui transitent par le Web : comment les ranger, les 
organiser, les hierarchiser, les definir, dans un seul 
objectif, faciliter la recherche d'informations. 
(B Peter Morville & Louis Rosenfeld, Informa- 
tion Architecture for the World Wide Web, 
O'Reilly Media, 2006 
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On visite parfois un site Internet dans le simple but de passer le temps et 
de voir ce que ce site pourrait proposer d'interessant. Cette strategic de 
navigation n'est pas la plus frequente et elle est moins impactante : les 
internautes sont en effet moins exigeants lorsqu'ils ne cherchent pas a 
accomplir une tache precise. Elle doit cependant etre prise en compte, 
d'autant quelle peut constituer la suite d'une recherche ciblee (par 
exemple, je commence par chercher un produit precis, je le mets dans mon 
panier, puis je continue a parcourir le site parce que quelque chose en par- 
ticulier m'a donne envie ou que le site en general semble interessant). 

Cette navigation sans but precis, de type decouverte, peut etre supportee 
par la mise en avant de certains contenus, par des navigations transversales 
et contextuelles, des raccourcis, la presentation d'informations et de liens 
en rapport avec la page consultee, etc. La navigation libre est ce que Cat- 
ledge & Pitkow appellent Open ended browsing. Elle peut etre assimilee a 
une promenade sur le Web, restreinte ou non a un site en particulier. 

Support : la navigation transversale, generee en fonction du besoin 

Le propre des elements de navigation transversaux est de n'obeir a aucune 
regie particuliere. Autrement dit, les navigations transversales ne parta- 
gent d'autre caracteristique commune que de lier un contenu a un autre. 

La plupart du temps, la navigation transversale est proposee a partir d'une 
page de bas niveau, afin de mettre en correspondance des contenus de 
meme type ou entretenant un lien quelconque avec la page en question. 

Elle apparait souvent sous forme de liens hypertextes, voire d'images 
lorsque les contenus de destination peuvent etre representes sous forme 
visuelle (par exemple, des produits). En effet, le format des navigations 
transversales doit respecter leur niveau d'importance : puisqu'elles cons- 
tituent une sorte de suite logique a la consultation d'une page donnee, 
elles doivent etre presentes mais ne pas empieter sur le reste de la page. 

On peut aussi parler de navigation contextuelle (ou encore ad hoc), dans 
le sens ou c'est le contexte de la page qui va determiner les contenus a 
lier a cette meme page. Ce type de navigation part done du principe 
suivant : la probabilite que l'internaute s'interesse a un contenu X aug- 
mente lorsqu'il consulte un contenu entretenant un lien quelconque avec X. 
Ce lien peut prendre des formes tres diversifiees. Sur un site de vente de 
vetements, le lien peut etre : un produit dans la meme gamme de prix, 
de la meme couleur, un accessoire pour accompagner le produit, d'autres 
articles choisis par les internautes ayant achete le produit, un produit de 
la meme marque, etc. 
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Les navigations transversales peuvent etre prevues lors de la conception. 
Ce principe consiste a lier un element, de maniere automatique et selon 
des regies precises, a d'autres contenus. Par exemple, on prevoit de tou- 
jours proposer sur la fiche d'un produit des acces vers des articles compa- 
rables. Cependant, la navigation transversale peut aussi etre generee a un 
endroit donne du site, sur une seule page, parce que Ton souhaite emmener 
l'internaute vers des contenus complementaires. 
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Figure 8-5 Dans cet exemple, une fonctionnalite de navigation tranvsersale me permet de consulter des articles compa- 
rables au mien. Ici, les articles selectionnes sont les ouvrages achetes par les internautes ayant egalement choisi ce livre. 
Source : www.fnac.fr 
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Figure 8-6 

Autre exemple sur le site de I'editeur Didier Jeunesse, 
ou une fonctionnalite de navigation tranvsersale me permet de consulter 
d'autres livres sur le meme theme {Corps, Faire la fete, Imaginaire). 
Source : www.didierjeunesse.com 
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Rechercher ou naviguer, telle est la question 

Lorsqu'un site dispose d'un moteur de recherche, on peut trouver une 
information ou un produit en utilisant soit une strategic de recherche, 
soit une strategic de navigation. Plusieurs criteres entrent en compte 
pour selectionner une de ces strategies. 

La raison pour laquelle on vient sur le site 

Selon qu'un internaute vient sur un site Internet pour rechercher un con- 
tenu bien particulier (par exemple, le dernier livre d'Anna Gavalda) ou 
plutot un type de contenu (par exemple, les parutions recentes de polars 
francais), il va adopter des strategies de visite differentes. Le premier cas 
favorise les strategies de saisie d'un mot-cle, tandis que le second favorise 
la navigation par clics successifs sur des menus ou des liens. 

Les preferences personnelles de I'utilisateur 

Certains d'entre nous ont tendance a adopter un comportement de type 
recherche, tandis que les autres prefereront parcourir l'arborescence. 
Notez que, lorsqu'une des strategies echoue, les internautes se reportent 
en general sur l'autre. 

Les objectifs poursuivis 

En general, plus on souhaite aller vite, plus on aura tendance a chercher 
un champ de saisie ou entrer precisement la requete. 

Si Ton dispose d'un peu plus de temps et que le site est agreable, on 
pourra privilegier l'utilisation des menus du site. Ce type de navigation 
nous permettra en outre d'etre confronte a d'autres informations que 
celles recherchees. C'est par exemple le cas si je souhaite un recueil de 
poesie en particulier, mais que je m'interesse aussi a tout ce qui est publie 
dans ce domaine. Je peux alors commencer par naviguer, m'interesser a 
divers ouvrages ; puis si, au cours de ma navigation, je ne suis pas amene 
a tomber sur l'ouvrage souhaite, je peux proceder a une recherche par 
mot-cle en utilisant le nom de l'auteur et/ou le titre du livre. 

La confiance envers le moteur de recherche et la navigation 

II arrive frequemment que Ton ne trouve pas le contenu souhaite via un 
moteur de recherche, alors meme qu'il existe dans le site. On n'entamera 
done une strategic de recherche que si Ton espere trouver des resultats 
pertinents. 

Les deux principaux facteurs pouvant nous faire pencher vers la strategic 
de recherche sont, d'une part, le niveau de confiance que Ton a dans la 
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qualite generate du site consulte et, d'autre part, le fait que Ton ait deja 
utilise son moteur de recherche. La qualite percue du moteur de 
recherche peut augmenter avant meme qu'il ne soit utilise. 

Ainsi, une partie des internautes sont rassures par le fait qu'un moteur 
de recherche interne a un site soit estampille Google, Msn ou Yahoo, 
parce qu'ils ont deja eu des experiences d'utilisation positive de ces 
outils. lis auront done plus facilement confiance en sa qualite et en sa 
capacite a renvoyer des resultats interessants. Attention cependant a ce 
genre d'interface, qui peut entrainer une confusion entre moteur de 
recherche interne au site et recherche sur le Web en general. 
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Figure 8-7 Sur le site d'Eurosport, I'indication Powered by Yahoo! Search permet d'esperer 

que le moteur de recherche soit de qualite, et nous fournisse des resultats pertinents. 

Source : www.eurosport.fr 

Le type de site 

On a davantage tendance a effectuer des recherches par mots-cles sur 
des sites au contenu fourni, hebergeant beaucoup d'informations. Par 
exemple, sur le site de Wikipedia, il est probable que le moteur de 
recherche soit beaucoup plus utilise que la navigation hierarchique par 
themes et sous-themes, du fait de sa nature d'encyclopedie en ligne 
[http://www.fr.wikipedia.org ]. 



La presentation des fonctions de recherche et de navigation 

En fonction de la presentation du site, on peut etre incite a effectuer une 
recherche par mots-cles ou a utiliser les menus de navigation. Par 
exemple, lorsque le champ de saisie du moteur de recherche est acces- 
sible par un lien, et non disponible en permanence, on reduit le taux 
d'utilisation de cet outil. A l'inverse, faire du champ de recherche l'ele- 
ment principal d'une page et le placer au beau milieu augmente sa pro- 
babilite d'usage. 

Vous devez tenir compte du type de votre site pour mettre en avant le 
moteur de recherche de maniere plus ou moins marquee. 



Idee recue 
Le concept ne travaille pas a votre place 

Tous les sites ont une architecture de I'informa- 
tion, qu'elle soit bonne ou mauvaise. II ne suffit 
pas de prononcer ce mot pour que, par magie, 
I'organisation de votre site devienne logique et 
intuitive pour tous. 



307 



Aller PLUS LOIN Optimiser le comportement de recherche par mot-cle : proposer 
des elements de navigation en reponse a une strategie de recherche 

Imaginons que je vienne sur le site de TF1 pour voir des photos de 
I'heroTne de la serie « Le destin de Lisa », qui passe sur cette chaine le 
vendredi soir. Pour atteindre cet objectif, je peux saisir Le destin de Lisa 
dans le champ de recherche ou cliquer sur Programmes, puis Series et 
enfin Le destin de Lisa. Or, en me dirigeant vers le champ de recherche ou 
la barre de navigation, je constate que le moteur de recherche com- 
porte une fonctionnalite additionnelle : celle-ci permet de naviguer 
directement vers les contenus les plus recherches par les internautes. Je 
ne vais done utiliser ni le moteur de recherche, ni la barre de navigation, 
mais les liens rapides fournis sous le moteur de recherche. 
Un bel exemple de facilitation des actions utilisateur, mais aussi d'incita- 
tion a consulter des contenus courus. 



TFI 



l«fL 

3 ftecftw efee j j® TH.fr ® Video (J Shopping Q Web Q3 

LES PLUS POPULAIRES : 1 . Secret Story 2. [tesijpde Lisa 3. Tentation 4. Mystere 5- Program™ tele 6- JT 



SStrfl d* 



Figure 8-8 Fournir des liens rapides vers les recherches les plus populaires est un bon 

moyen d'optimiser le comportement de recherche par mots-cles : grace a ce procede, 

on favorise la rapidite et on reduit le risque d'erreur. Les liens rapides permettent aussi 

de controler ce que les internautes vont consulter. En effet, suite au die sur un lien 

rapide, on est dirige vers une page de contenu, et non vers une liste de resultats. 

Source : www.tfl .fr 



Une organisation calquee sur les attentes 
de I'internaute 

L'architecture d'un site doit refleter la maniere dont les gens pensent et 
cherchent une information. C'est done en essayant de coller au plus pres 
a leurs reflexes que vous creerez la meilleure architecture de l'informa- 
tion. Plusieurs sources peuvent vous aider a cerner ces reflexes. 

Source d'inspiration n° 1 : les objectifs 
et comportements utilisateur 

Si vous avez suivi notre demarche de conception et commence par ima- 
giner des personas (voir a ce propos le chapitre 4), vous avez du leur 
affecter des objectifs en termes de taches a realiser sur le site. L'architec- 
ture de l'information doit faciliter l'accomplissement de ces taches-cles. 
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Aller PLUS LOIN Des systemes de navigation cameleons des comportements utilisateur 

Les exemples ci-apres illustrent parfaitement 
comment une architecture de I'information 
peut etre concue en adequation avec des objec- 
tifs utilisateur. Les sites analyses prennent 
comme source le comportement reel des utilisa- 
teurs sur le site Internet et en font la base d'un 
systeme de navigation specifique. 

Les hot tags de Daily Motion 

Le site de Daily Motion propose de naviguer a 
travers des videos sur la base de mots-cles (ou 
tags) affectes a chacune de ces videos. Le con- 
cept de Hot tags correspond aux tags les plus en 
vue du moment. Proposer une liste de ces tags 
aux internautes revient a appliquer un systeme 
comparable a celui precedemment remarque 
sur le site de TF1 : finalement, on obtient une 
navigation creee par les utilisateurs eux- 
memes, et non par les concepteurs du site. Ces 
derniers n'ont pense que le fonctionnement du 
systeme, non son contenu. C'est le comporte- 
ment des autres utilisateurs qui influence le 
contenu des navigations fournies. 

Les suggestions personnalisees de Reser- 
voir Jeux 

De son cote. Reservoir Jeux propose a ses 
clients de naviguer au sein d'une liste de pro- 
duits generee specialement a leur intention, 
sur la base d'un algorithme charge de sug- 
gerer les produits les plus susceptibles de leur 
plaire. Ce type de personnalisation prend 
comme entree le comportement des utilisa- 
teurs et en sort un systeme de navigation per- 
sonnalise, adapte a chacun. 
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Figure 8-9 Sur le site de Daily Motion, le contenu du nuage de hot tags provient 

directement des comportements de I'ensemble des visiteurs du site. 

Source : www.dailymotion.com 
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Figure 8-10 Sur le site de Reservoir Jeux, le contenu des suggestions provient 

directement de I'interaction entre les comportements de I'utilisateur et une 
matrice de similarity entre jeux. Cette matrice est calculee a partir des comporte- 
ments de tous les visiteurs du site. 
Source : www.reservoir-jeux.com 



Void quelques exemples de taches sur lesquelles se baser pour optimiser 
une architecture de rinformation : 

• Contacter le service client. 

• Trouver un livre d'images pour ma niece a moins de 15 €. 

• Reserver un billet de theatre pour la semaine prochaine. 

• Telecharger le dernier single de mon chanteur prefere. 

• Trouver la liste des clubs de sport dans le 17e arrondissement. 

• Chercher une recette pour le diner de ce soir. 
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Figure 8-11 La fonctionnalite de Recette 

au hasardsur le site de Marmiton entre 

en resonance avec un besoin utilisateur. 

Source : www.marmiton.org 



Dans ce livre Tout savoir sur les tris de cartes 
et les tests utilisateur 

Pour une presentation complete de la methode du 
tri de cartes, rendez-vous au chapitre 10. 
Pour une presentation complete de la methode du 
test utilisateur, rendez-vous au chapitre 1 1 . 



Observez ainsi comment le site de Marmiton propose plusieurs 
manieres de trouver une recette, notamment une fonctionnalite de 
Recette au hasard, qui colle parfaitement au contexte : « Je n'ai aucune 
idee de ce que je vais preparer pour ce soir » ou « Je cherche de nouvelles 
recettes a experimenter ». 

Si vous travaillez sur la refonte d'un site, vous devez vous procurer les 
statistiques d'utilisation et les fichiers de logs du moteur de recherche 
(c'est-a-dire les details de l'ensemble des requetes effectuees par les 
internautes a travers votre moteur de recherche). 

Ces informations seront precieuses pour comprendre ce que les visiteurs 
viennent faire sur votre site, les pages qu'ils y consultent ou encore d'ou 
ils viennent. Ces indices doivent etre analyses a la lumiere des taches- 
cles que vous voulez supporter. 

Source conspiration n° 2 : les representations mentales 

Pour acceder aux representations mentales des internautes sur l'organi- 
sation d'un ensemble de contenus, vous devez necessairement les ren- 
contrer. La premiere methode consiste a demander a plusieurs personnes 
de participer a ce que Ton appelle un « tri de cartes » ou « tri par cartes ». 
Cette technique est souvent utilisee pour aider a la categorisation. Elle 
consiste a presenter aux utilisateurs chacun des contenus du site sous 
forme de carte. Le but est qu'ils constituent les groupes de cartes qui leur 
semblent pertinents. 

La seconde methode consiste a analyser les representations mentales lors 
de sessions de tests utilisateurs. Dans ce cas, il s'agit de proposer aux 
gens de proceder comme dans la vie reelle et de realiser des scenarios 
d'interaction, soit sur votre site existant, soit sur un panel de concurrents. 
Cette methode permet entre autres de tester l'efficacite de l'architecture. 

Unpeude PSYCHOLOGY La representation mentale d'un site web 

Les internautes qui ont I'intention de visiter un site s'en font une repre- 
sentation mentale avant meme d'y acceder. 

Ce concept qu'ils ont en tete decrit, notamment, les contenus ou ser- 
vices qu'ils s'attendent a trouver sur le site en question. Deux options 
s'offrent alors : 

• Soit vous disposez effectivement des contenus que I'utilisateur 
recherche et vous essayez de coller a sa definition mentale de ce con- 
tenu. 

• Soit vous ne disposez pas des contenus attendus et I'utilisateur doit 
pouvoir s'en rendre compte le plus rapidement possible. II pourra 
alors modifier sa representation mentale de votre site et poursuivre 
sa recherche ailleurs. 
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L'observation de personnes reelles en pleine interaction avec un site 
Internet est, pour un concepteur web, une source inestimable d'informa- 
tions. Rien ne peut remplacer ce face a face de l'utilisateur avec l'ecran 
pour comprendre les defauts d'un site web et les correctifs envisageables. 

Source {('inspiration n° 3 : allez voir ailleurs ! 

Vous ne reussirez pas votre architecture de l'information si vous ne vous 
appropriez pas l'environnement que connaissent vos internautes. II est 
probable que quelqu'un qui achete de la musique sur Internet soit deja 
alle en acheter dans un magasin, chez Fun de vos concurrents, ou encore 
en ait emprunte dans une discotheque. 

Cette experience aura forge son modele mental d'une certaine maniere. 
Votre but : construire votre site en adequation avec le modele le plus 
repandu parmi vos utilisateurs cibles. 

Plus vous aurez de references dans le domaine qui vous interesse, plus vous 
aurez de billes en main pour prendre des decisions sur l'architecture de 
votre site. Par exemple, visiter un magasin de jeux est une source d'infor- 
mations inestimable pour reperer la maniere dont les jeux sont organises et 
presentes aux clients des boutiques. II ne s'agit pas forcement de retrans- 
crire tel quel un mode d'organisation prevu pour un espace physique, mais 
plutot de s'impregner de reperes connus des clients du site. 

Analysez comment se sont debrouilles vos concurrents pour les choix qui 
vous posent probleme et, si votre site a un correspondant dans le monde 
reel, allez voir ce qui s'y passe. 

Source (('inspiration interdite : votre propre vision 
des choses 

Attention a ne pas calquer l'architecture de votre site sur l'organisation 
interne de votre entreprise (a moins de travailler sur l'intranet) ou sur un 
jargon professionnel si votre site est a destination du grand public. 

La regie a observer est simple : les possibilites de navigation que vous 
offrez a vos utilisateurs doivent coller a leurs preoccupations. Vous devez 
done calquer la navigation sur la logique des internautes et non sur la 
votre. Observez par exemple la transformation de la navigation au sein 
du site Asmodee lors de sa derniere refonte : il vise toujours a proposer 
aux internautes un catalogue de jeux de societe, mais l'architecture a ete 
completement remodelee. Les jeux ne sont plus ranges dans des gammes 
commerciales, mais par « type de jeu ». On a en effet observe que e'est le 
premier critere que fournissent les joueurs pour decrire un jeu, et que 
e'est egalement le plus important dans le choix d'un jeu. 
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Figure 8-12 

Dans la seconde version du site d'Asmodee, 

les jeux de societe etaient classes par gammes 

commerciales, difficilement comprehensibles 

par les intemautes. Dans la troisieme version 

du site, on propose done de naviguer par type 

de jeu, ou parmi tous les jeux sans distinction 

d'appartenance. 

Source : www.asmodee.com 
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Attention, cela ne dispense pas de mener une reflexion strategique lors 
de la phase d'architecture de Finformation ! II s'agit simplement de 
rendre toutes les informations comprehensibles par l'utilisateur et de les 
faire correspondre a ses besoins. 

Si vous avez besoin de mettre en avant un contenu ou un produit en par- 
ticulier, vous pouvez tout a fait vous permettre de modeler l'architecture 
dans ce sens. Observez ainsi comment la navigation du site de Clinique 
pousse Fentree vers un de leurs produits phares, le Basic 3 temps, satis- 
faisant ainsi a la fois des objectifs de marque (promouvoir le produit) et 
des objectifs utilisateur (un bon pourcentage de leurs visiteurs venant 
pour s'informer sur ce produit). 



Figure 8-13 

Sur le site de Clinique, la mise en avant 

du basic 3 temps au premier niveau 

de navigation correspond a un besoin 

utilisateur et marketing. 

Source : www.clinique.fr 
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Gardez done toujours a l'esprit que vos choix d'architecture de Finfor- 
mation resultent d'une convergence d'objectifs : d'une part la necessite 
de faciliter la navigation pour vos visiteurs et, d'autre part, des exigences 
strategiques et/ou marketing. Si ces objectifs entrent en conflit, sachez 
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faire des compromis et privilegier la simplicite d'usage. Nous verrons par 
la suite que vous aurez bien d'autres moyens qu'une barre de navigation 
pour mettre en avant des contenus et que cela vous garantira souvent de 
meilleurs resultats. 



Concevez votre architecture de ('information 

Mode d'emploi en deux etapes : categoriser puis 
structurer 

Deux grandes etapes permettent de construire une architecture de 
rinformation a partir d'une masse de contenus. La premiere consiste a 
categoriser les contenus, c'est-a-dire a creer des groupes. La seconde vise 
a structurer ces groupes, c'est-a-dire a les hierarchiser et a definir les 
relations qu'ils entretiennent. 

La categorisation : regrouper pour simplifier 

La categorisation est une operation mentale qui nous permet de perce- 
voir le monde de maniere plus simple, a travers un filtre qui epargne 
toute surcharge a notre cerveau. 

Elle consiste a ranger les choses dans des groupes, ou categories : on met 
ensemble ce qui se ressemble, on separe ce qui nous semble different. Ce 
reflexe cognitif s'applique a tout ce qui nous entoure : informations, 
lieux, objets, personnes... 

Autrement dit, on decoupe le monde pour mieux le comprendre. Ce 
processus fondamental nous permet d'utiliser des references communes 
pour designer notre environnement. Quand je parle d'une truite, mes 
interlocuteurs comprennent implicitement qu'il s'agit d'un poisson et 
done d'un animal (figure 8-14). Dans une telle taxonomie, 1' element 
sur-ordonne possede des caracteristiques qui s'appliquent a l'ensemble 
des objets de plus bas niveau. C'est cette categorisation qui nous evite de 
repeter les caracteristiques qu'un objet partage avec d'autres. A chaque 
niveau, la seule chose que Ton decrit sont les caracteristiques specifiques 
de l'objet. 

Sur le Web, comme ailleurs, nous categorisons les choses. Si vous consi- 
derez l'integralite des contenus et services de votre site, vous constatez 
rapidement que des groupes logiques se degagent de cet ensemble. Cer- 
tains de ces contenus peuvent etre classes dans un meme groupe, pour 
differentes raisons. 
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Point de vue utilisateur Faites comme chez vous 

Pensez a la maniere dont vous rangez les choses 
dans votre ordinateur. Lorsque vous n'avez que tres 
peu de fichiers, vous pouvez vous contenter de tout 
mettre au meme endroit. Puis, a mesure que les 
semaines et les mois passent, vous entassez de plus 
en plus de fichiers et la difficulte de trouver un 
fichier precis dans votre ordinateur croft. Vous com- 
mencez a creer des dossiers et des sous-dossiers 
pour ranger vos fichiers. Vous leur donnez des noms 
en fonction des criteres ayant servi au regroupe- 
ment. C'est votre categorisation personnels. 
Lorsque vous architecturez un site web, vous devez 
proceder de meme, mais de maniere a ce que le sys- 
teme de rangement soit comprehensible par tous. 



Definition Taxonomie 

Terme cree a I'origine pour definir la classification 

des etres vivants. Son sens a ensuite ete etendu 

pour designer toute organisation hierarchique 

representant un ensemble d'items sous forme de 

relations parent-enfant. 

Cette representation prend souvent la forme d'un 

arbre, chaque nceud de I'arbre definissant ce que 

Ton nomme un taxon. 

Synonyme : Taxinomie. Le terme de taxonomie est 

cependant le plus couramment utilise, surtout dans 

ses extensions hors classification des etres vivants. 
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Figure 8-14 

Selon la structure taxonomique 

de la classification des etres vivants, 

la truite est un poisson qui est un animal. 









fAnimaux A 






Oiseaux 


f PoissonsJ Insectes 


Ma 


mmiferes 

> 


1 

Angui 


lie 


Brochet 


Dorade f 


4-. 

Truite 



Figure 8-15 

L'activite de categorisation permet 

de former plusieurs groupes a partir 

d'un ensemble de contenus. 




VOCABULAIRE Vous avez dit 
critere d'organisation ? 



Lorsqu'ils evoquent les differentes manieres de 
categoriser du contenu, Rosenfeld & Morville par- 
lent d' « organization schemes ». Pour retrouver 
une liste plus complete de criteres d'organisation, 
n'hesitez pas a lire le chapitre 5 de leur ouvrage, 
nomme « Systemes d'organisation ». 
IB Peter Morville & Louis Rosenfeld, Informa- 
tion Architecture for the World Wide Web, 
O'Reilly Media, 2006 



Apres avoir dresse la liste des contenus et services qui doivent figurer 
dans votre site, il s'agit done de les rassembler dans des groupes. Vous 
devez determiner ce qui permet de rapprocher un contenu d'un autre. 
De nombreux criteres peuvent sous-tendre cette etape de categorisation. 

Alphabet 

Les groupes sont constitues des lettres de l'alphabet ou des plages com- 
prises entre deux lettres de l'alphabet. 

Le critere alphabetique peut etre plus ou moins explicite. Par exemple, 
sur le site de Virgin Mega, une fois que j'ai choisi rubrique et sous- 
rubrique pour definir le style de musique recherche, je tombe sur une 
liste d'artistes organisee par ordre alphabetique. Visuellement, tous les 
artistes font partie d'un meme groupe, allant de la lettre A a la lettre Z. 
C'est l'internaute qui percoit dans ce grand ensemble 26 sous-groupes, 
parce qu'il connait le systeme d'organisation alphabetique. 



314 



C Vaiiele Fiaii^nBe 

C Techno, Elects, Dcnec 

r Soul, ru-i„ C.izj 

K^i Raggae. Fares 

Rap, Hip Hep 

FTjiT, Oroote 

O Muakpues Ju rauride 

C f ' L 5M J 2 L 13 S i "3 J? 

Jazz. Blues 

C I" ai J Ftoi*. Metal 

r} FnTJUlLt 

O Country 

Cinema. TV 




C Ansfy L'owloM 


- 


Anthony Rapp 


-- 


O Anuuuiie fljahtu 




O Anrsftnn 




C Aaubis Spire 




Any Day in June 




o Apart FrannTttePrajsacir 




f Apotoaa 




Apaptyarru Hcrzerk 




r ApuslteOrHuslfe 




fl Apple JRly 




C Apple of Discard 




C Applance 


- 


, 



Choisissez un 
artiste 



c 



Figure 8-16 

Sur le site de Virgin Mega, le classement 
alphabetique est implicite. 
Source : www.virginmega.fr 
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A l'inverse, sur le site de SFR Music, la liste d'artistes est organisee dans 
l'ordre alphabetique, mais des liens de navigation explicites permettent 
de la filtrer pour afneher uniquement les artistes dont le nom commence 
par une lettre precise. 
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Figure 8-17 

Sur le site de SFR, le classement alphabetique 
est appuye par des indices explicites. 
Source : www.sfr.fr 



Chronologie 

Les groupes sont bases sur des reperes chronologiques (exemple, une 
date) ou des plages de temps. Void quelques exemples connus d'organi- 
sations chronologiques : un programme TV, le calendrier d'une saison 
de theatre, la biographie d'un personnage celebre. 

Localisation geographique 

Les groupes representent des territoires. Lorganisation geographique est 
particulierement utile dans les taches de recherche et/ou de localisation 
d'une destination. 
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OUTILS PRATIQUES 

Figure 8-18 Categorisation par actions utili- 

sateur sur le site de La Poste. 

Source : www.laposte.fr 



Les groupes sont des thematiques ou des sujets. Le systeme thematique 
est le systeme le plus frequent. Par theme, ou sujet, on entend plus large- 
ment toute categorie signifiante d'un point de vue cognitif. Ce type 
d'organisation, plus ambigu que les systemes precedents, donne souvent 
lieu a des discussions. 

Actions utilisateur 

Les groupes sont des objectifs en termes de taches. Les interfaces logi- 
cielles sont souvent organisees selon des modeles de taches selon les- 
quelles on regroupe des options partageant des caracteristiques d'objectif 
(exemple : Copier, Colter, Tout selectionner se retrouvent dans un groupe 
Edition car ils ont en commun de relever d'une action d'edition du texte). 

La navigation du site Particuliers de La Poste est un bon exemple de cate- 
gorisation par taches utilisateur : tous les items de la navigation sont traites 
sous forme de verbes a l'imperatif decrivant une tache utilisateur-cle. 

Cible utilisateur 

Les groupes sont des groupes d'utilisateurs. Par exemple, sur le site de 
l'ANPE, on propose aux internautes de se diriger vers l'une ou l'autre de 
deux grandes sections selon leur profil : Candidat ou Employeur. 



Figure 8-19 ^ 

Categorisation par cibles utilisateur R0 

sur le site de l'ANPE. Qflpe.ff 
Source : www.anpe.fr 
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Definition Polyhierarchie 



Lorsqu'une meme information se retrouve dans 
plusieurs groupes, on parle de polyhierarchie. 

• La polyhierarchie peut etre virtuelle, c'est-a-dire 
Ton se contente de construire des liens supple- 
mentaires permettant de lier un objet a plu- 
sieurs peres. Dans ce cas, un objet a un pere 
biologique et plusieurs peres adoptifs. En 
termes techniques, la page ne se trouve qu'a un 
seul endroit sur le serveur. 

• La polyhierarchie peut etre reelle, c'est-a-dire 
que les objets sont dupliques dans plusieurs 
rubriques. Au niveau technique, plusieurs pages 
sont creees et reparties a divers endroits sur le 
serveur. 



Chacun de ces types d'organisation peut encore etre defini par l'exacti- 
tude des resultats auxquels il aboutit. Ainsi, Rosenfeld & Morville dis- 
tinguent deux grands types de criteres d'organisation : 

• Les criteres d'organisation exacts (alphabetique, chronologique, geo- 
graphique) qui seraient plus utiles lorsque l'internaute sait exacte- 
ment ce qu'il recherche. 

• Les criteres d'organisation ambigus (par themes, taches, audience, 
metaphore, etc.) plus adaptes lorsque l'internaute navigue sans idee 
precise, ne connait pas exactement ce qu'il recherche ou possede un 
perimetre de recherche assez large. 

Plus le critere d'organisation est ambigu, plus l'organisation pourra etre 
polyhierarchique, c'est-a-dire que la meme information pourra se 
retrouver dans plusieurs groupes a la fois. Notez que l'exclusivite n'est 
pas un critere obligatoire dans le cas de la categorisation web : on peut 
tout a fait concevoir des rubriques permeables entre elles. C'est d'ailleurs 
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Definition La trouvabilite 

Ce terme barbare traduit de I'anglais Findability designe 
la capacite d'un site a guider les utilisateurs pour qu'ils y 
trouvent leur chemin oil I'objet qu'ils recherchent. 
Ainsi, un objet « trouvable » est un objet dont on a opti- 
mise toutes les voies d'acces afin de s'assurer qu'un utilisa- 
teur puisse le localiser de maniere intuitive. 
Le concept de Findability a ete invente par Peter Morville. II 
n'est pas restreint au domaine du Web et s'applique dans nos 
environnements quotidiens, aussi bien reels que virtuels. 
► http://findability.org 

03 Peter Morville, Ambient Findability, O'Reilly 
Media, 2005 




< 
i 

00 



ce qui explique pourquoi on peut proposer aux participants d'un tri de cartes 
d'en dupliquer certaines s'ils en ont besoin. 

Sur un site Internet, on observe tres frequemment une organisation 
multi-criteres, croisant des approches thematique, alphabetique ou par 
taches, par exemple. C'est cette multitude d'approches qui permet d'obtenir 
des sites utiles pour les internautes, supportant un grand nombre de 
strategies de recherche. 

La structuration de I'information 

Lorsque vous disposez de tous vos groupes d'informations, l'etape sui- 
vante consiste a proceder a un nouveau travail d'organisation pour les 
structures c'est-a-dire degager une vue d'ensemble plus hierarchisee. 
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Structuration 



► 



□ 
L 
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La structuration des groupes est done une activite qui consiste a mettre en 
valeur certains des contenus, a faciliter l'acces aux ressources disponibles, 
a effectuer des connexions pertinentes entre ces ressources. 



Figure 8-20 

La structuration permet de passer 
d'un ensemble de groupes discrets 
a un ensemble de groupes hierarchises 
et ordonnes. 



Recommandation Rubriques incontournables 

Pensez aux pages « generiques » qui s'ajoutent a 
vos contenus et doivent faire partie des barres de 
navigation. Parmi ces incontournables, I'accueil, le 
plan de site, les contacts, I'aide, etc. 
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Une structure hierarchique representee par les menus 

Le plus gros du travail de structuration consiste a etablir la hierarchic et 
la place de chacun des groupes en fonction de leur importance respec- 
tive. En effet, tout ce que vous avez a dire ou a proposer sur votre site ne 
possede pas necessairement le meme poids. Cette hierarchie se traduit 
en termes d'interface par les barres de navigation globales et locales. 

Un exemple, sur le site de l'Equipe, tous les sports sont considered en 
tant que tels (autrement dit, l'athletisme est un sport au meme titre que 
le volley), mais la structuration de la barre de navigation principale privi- 
legie la visualisation des sports dits majeurs. Les autres sports sont 
accessibles via l'item Et aussi. 

La structuration s'illustre en outre par des regroupements par type de 
sport. Observez notamment la rubrique Basket /Hand /Volley, rassem- 
blant trois sports dont la caracteristique commune est de se jouer avec 
un ballon a la main. 



Figure 8-21 

La structuration du site de l'Equipe transparatt 

dans la navigation principale, oil tous les 

sports n'ont pas la meme importance. 

Source : www.lequipe.fr 
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METHODOLOGIE Les conventions font loi 

Les barres de navigation ne font pas exception. 
Voila encore un domaine ou vous devrez vous pre- 
occuper des conventions web (que font les 
autres ?), vous en inspirer ou vous y plier. 
Prenons un exemple : la place du bouton Accueil 
dans la barre de navigation principale. Auriez-vous 
I'audace de le mettre en plein milieu du reste, sous 
pretexte que votre menu est ordonne par fre- 
quence d'utilisation et que vos internautes auront 
« moyennement » besoin de retourner a votre 
page d'accueil ? 

Evidemment, non. Lorsque le bouton Accueil fait 
partie de la barre de navigation principale, il doit 
etre le premier bouton de cette barre de naviga- 
tion. Pour mieux comprendre les raisons justifiant 
de respecter les conventions d'interface, rendez- 
vous a la regie n° 4 du chapitre 5. 



Comme amorce precedemment lorsque nous evoquions des organisa- 
tions multi-criteres, vous pouvez tout a fait vous permettre d'avoir des 
items de nature differente dans un menu. Ce choix n'est toutefois Justine 
que si cela sert les objectifs utilisateur et la maniere dont les internautes 
vont chercher l'information. 

Par exemple, la navigation principale du site de Sephora comporte un 
item Homme et un Girls, qui s'adressent a des publics particuliers (c'est 
done une organisation par audience), presentes de maniere adjacente et 
sur le meme plan que des items « thematiques » de type Parfum, 
Maquillage, Soins & Cheveux, Bien-itre, Accessoires. Effectivement, si je 
suis un homme et que je viens chercher une creme de jour sur le site de 
Sephora, je me dirigerai preferentiellement vers la rubrique Homme 
plutot que vers Soins & Cheveux. Cela me permettra de trouver plus rapi- 
dement le produit que je desire, au lieu de fouiller parmi toute une 
gamme de produits destines aux femmes. Le meme principe s'applique 
pour la rubrique Girls, dont les produits sont preferentiellement peu 
chers , « funs » et destines aux jeunes filles. On replique ainsi des prin- 
cipes d'organisation deja connus dans le monde reel. 
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PARFUM MAOUILLAGE 50IK A CHEVEUX BIEH ETRE ACCESSOIREE HOMME GIRLS CADEAUX MAROUES 



Figure 8-22 

La structuration du site de Sephora transparait 
dans la navigation principale, ou on peut 
observer plusieurs types d'items. 
Source : www.sephora.fr 



De meme, la navigation du site d'Interflora conjugue plusieurs schemas 
d'organisation afin de repondre aux preoccupations les plus frequentes 
de ses visiteurs. Quelques questions a se poser dans ce contexte : Pour- 
quoi achete-t-on un bouquet defleurs ? Autrement dit, qu'est-ce qui amene 
les gens a acheter desfleurs ? On repondra ainsi par deduction a la question 
Pour qui achete-t-on des flews ? Comment cherche-t-on un bouquet de 
flews ? Quels sont les criteres qui nous permettent de choisir, parmi un 
ensemble, un bouquet de flews particulier ? 

Ce sont les reponses a cet ensemble d'interrogations qui permettent a 
Interflora de proposer une navigation par Type (ou les roses sont mises 
au meme niveau que les bouquets, en raison de la frequence plus elevee 
des demandes de roses par rapport a d'autres types de fleurs), mais aussi 
par Occasion et par Prix. 

Dernier exemple sur le site de France Inter (figure 8-25), ou tous les items 
de la navigation principale ne relevent pas du meme niveau. Ainsi, les con- 
cepteurs ont choisi de sortir certaines emissions pour les placer en acces 
direct dans la barre de navigation. Ces items thematiques sont presentes 
de maniere adjacente a leur parent (la rubrique Emissions), a d'autres 
themes de plus haut niveau (par exemple, Programmes, Chroniques) ou 
d'un tout autre registre (par exemple, Selection musicale, Evenements), 
ainsi que quelques items orientes tache (par exemple, Ecoutez le direct). 

On peut traiter une meme structure hierarchique de manieres tres 
diverses selon les choix de navigation auxquels on precede. Si Ton prend 
l'exemple des supermarches en ligne, tous divisent leur navigation prin- 
cipale sous forme de rayons. Or Ooshop presente sa barre de navigation 
sous forme alphabetique, tandis que Telemarket opte pour un ordonnan- 
cement par frequence d'utilisation. 
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Figure 8-23 La selection des differents types 

de navigation proposes sur le site d'Interflora 

releve d'une activite de structuration. 

Source : www.interflora.fr 
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Figure 8-24 

Les choix de structuration des sites d'Ooshop 
et de Telemarket sont en grande partie lies au 
nombre d'items a presenter. 
Sources : www.ooshop.com / 
www.telemarket.fr 
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Figure 8-25 La selection des differentes 

entrees de la navigation principale du site de 

France Inter releve d'une activite de structuration. 

Source : www.franceinter.com 



Definition Les metadonnees 



Les metadonnees sont de I'information sur I'infor- 
mation. Autrement dit, elles permettent de decrire 
un objet par ses caracteristiques. 
Prenons un exemple. Les metadonnees d'un fichier 
informatique peuvent etre : son titre, son format 
(PDF, Word, HTML), son auteur, sa date de creation, 
etc. Elles ne font pas partie du contenu du fichier au 
sens propre, mais font partie de sa definition. 



Chez Ooshop, les rayons du supermarche sont presentes dans l'ordre 
alphabetique : on commence par Animaux pour finir par Surgeles. Le 
nombre eleve de rayons (20) explique ce choix de presentation alphabe- 
tique. Elle permet en effet de trouver rapidement ce que Ton cherche a 
l'interieur d'une longue liste d'items. Elle suppose cependant que Ton 
sache precisement le nom du rayon recherche. 

Avec un catalogue produits sensiblement de la meme taille, chez Tele- 
market, les rayons ne sont qu'au nombre de 8. Cela permet de les pre- 
senter dans un ordre qui semble correspondre a la frequence d'utilisation 
de chacun d'eux : on commence par Frais pour finir par Animaux. 

Lorsque vous decidez de l'ordonnancement des items dans vos barres de 
navigation, tenez en outre compte des effets de primaute et de recence. 
lis representent le fait que les internautes seront plus a meme de perce- 
voir les elements situes en debut et en fin de navigation. 
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Figure 8-26 Representation schematique des effets de primaute et de recence 

lors de la lecture d'une barre de navigation. Ces effets semblent encore plus marques 

dans le cas de menus verticaux, et lorsque le nombre d'items est important. 

Source : www.lacantiniere.com 

Au fur et a mesure des exemples presentes, vous commencez a com- 
prendre que l'organisation d'un site web est quelque chose de complexe 
et d'heterogene. En plus des points que Ton vient d'aborder, les contenus 
d'un site peuvent etre definis, et done recherches, autrement que par leur 
appartenance a une structure hierarchique. 

Une structure secondaire representee par des liens contextuels 

Les bases de donnees sont a cet egard des sources d'informations tres 
interessantes. Linverse est aussi vrai, dans le sens ou les concepteurs de 
sites web ont beaucoup a apporter aux informaticiens qui creent les bases 
de donnees. La definition des contenus doit faire l'objet, aussi frequem- 
ment que possible, de travaux communs entre les equipes de conception 
et les equipes techniques. 

Les metadonnees sont utilisees tres frequemment pour nourrir les ele- 
ments de navigation transversaux, que ce soit a partir d'une page finale 
(naviguer vers des contenus comparables) ou d'une page de rubrique 
(naviguer selon des criteres specifiques). 

Prenons un exemple sur le site Reservoir Jeux, ou les metadonnees sont 
utilisees de deux manieres sur deux types de pages differents. Sur des 
pages de haut niveau, elle servent a orienter la navigation selon des 
schemas d'organisation qui paraissent satisfaire des objectifs utilisateur 
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importants. Ici, on voit qu'elles permettent de naviguer a l'interieur dun 
catalogue selon les mecanismes utilises dans le jeu (sont presentes par 
defaut les 10 mecanismes preferes des internautes, par exemple Combi- 
naisons, Deduction, Encheres, Habilete, etc.). 



I Par mecanisme de jeuu 

. nternent 
s- Placement 
& Cornbinaisons 
»■ Parcours 
& Simultane 
:*■ Courses 
& Conquetes 
& Tuiles 

& To us les mecanismes 



Figure 8-27 

Les mecanismes employes par le jeu sont une metadonnee sur ce jeu. 
A ce titre, ils peuvent servir de des d'entree pour la navigation. 
Source : www.reservoir-jeux.com 
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Sur des pages de bas niveau (ici, une fiche produit), les metadonnees ser- 
vent a naviguer vers des jeux qui partagent une caracteristique commune 
avec le jeu que Ton est en train de regarder : meme auteur ou editeur, 
memes themes de jeux, memes mecanismes de jeu. 




DitoTrS & images du jeu ^ 



Fiche technique 

Langue : franca is 

Date de sortie : 1997 

Duree : 15 rninute(s) 

A partir de 7 ans 

De 3 a Sjoueurs 



Themes 

Ab strait 



Mecanismes 

Capture Reflexe Simultane 



Jungle Speed 



Editeur : Asniodee Editions 

Auteurs : Yakouenkoj Pierrick j VuarcheXj Thomas 



Votre tribu est atteinte d'etranges rnaux : manque de 
yitalite, besoin d'exercice ? 

Jungle Speed est le premier ■£ medicajeu s- alliant les 
principes actifs d'attention et de rapidite. Il est conseille en 
cas de grand stress, de reunion farniliale, de manque de 
uitalite ou de reflexes (liste non exhaustive). Posologie : 
minimum une partie par syrnptorne, aucun surdosage 
possible. 

Butdujeu : ne plus avoir de cartes ! Tour a tour lesjoueurs 
retournent une carte. Des que deux formes identiques 
apparaissent, le plus rapide attrape le totem et donne son 
tas de cartes deja decouvertes a son adyersaire. Mais 
attention aux symboles qui se ressemblent et aux cartes pieg 



Contenu de la bolte : 

- 1 totem en bois 

- 1 regie dujeu 

- SO cartes 

- 1 sac de rangement 



la fiche de ce jeu 




Figure 8-28 

L'auteur, I'editeur, les themes et mecanismes employes par le 
jeu sont des metadonnees sur ce jeu. A ce titre, ils peuvent 
servir de navigation transversale entre jeux. 
Source : www.reservoir-jeux.com 



Une structure floue representee par des liens semes au gre du site 

Au-dela des structures hierarchiques et des metadonnees, on peut consi- 
derer l'hypertexte comme un moyen de structurer rinformation au sein d'un 
site. C'est certes un moyen dangereux (puisque rien ne Justine formellement 
pourquoi lier un contenu a un autre), mais 6 combien flexible. Ce type de 
structure, qui evolue au fur et a mesure de la vie du site, se retrouve plutot 
sur des sites editoriaux geres par des gens plutot que par des machines. 
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Une structure vivante 

Notez que les etapes de categorisation et de structuration ne donnent 
pas des resultats figes ; ceux-ci peuvent etre remis en question pendant la 
suite du processus de conception du site ou durant sa vie en ligne. 

La structuration peut notamment etre modifiee en fonction de l'actua- 
lite. Par exemple, les items constituant la navigation principale du site 
d'actualites de Yahoo! France subissent des modifications en fonction de 
l'actualite. Dans cet exemple, la barre de navigation s'adapte a l'actualite 
politique : on cree un onglet Presidentielle afin d'y relayer tous les con- 
tenus sur ce theme. 

I Monde II France || Presidentielle |) Eco || Tech || People || Insolite || Sport || Sciences || Sante |) Culture 



Figure 8-29 La structuration d'un site peut evoluer en fonction de l'actualite. Ainsi, sur le site 

Actualites de Yahoo!, on voit apparaitre un onglet Presidentielle lorsque le site dispose de 

nombreux contenus sur ce sujet d'actualite. Cet onglet disparait lorsque les elections sont terminees. 

Source : fr.news.yahoo.com 



Dans ce livre Concevoir en tenant compte 
des limitations ecran 

Pour en savoir plus sur les contraintes ecran aux- 
quelles vous devez vous adapter lorsque vous con- 
cevez un site web, rendez-vous au chapitre 9. 



De meme, la structuration peut vous amener a revoir votre categorisa- 
tion, c'est-a-dire a revenir en arriere sur certains de vos choix. 

Bien que Ton soit encore en phase conceptuelle (a savoir une phase de 
reflexion a l'architecture de l'information dans l'absolu), on integre des 
cette etape les principales contraintes qui pourraient venir contredire 
notre hierarchic Ces contraintes sont de deux types : 

• Les caracteristiques cognitives des internautes, qui sont les memes 
que celles de tout etre humain. Elles sont done limitees. La descrip- 
tion de ces limitations fait l'objet de notre troisieme chapitre. 

• Les limitations en termes d'ecran. II est important de garder l'etape 
d'architecture de l'information distincte de sa concretisation par des 
elements d'interface. Linterface ne doit done pas contraindre l'archi- 
tecture. Cependant, la plupart du temps, dans la realite, ce principe 
ideal n'empeche pas de prendre en compte des le debut les con- 
traintes majeures relatives a l'interface d'un site web. 



Anecdote Boxes and Arrows 



Le magazine web d'architecture de l'information le 
plus connu s'appelle Boxes and Arrows, autre- 
ment dit des boites et des fleches, par analogie 
au livrable le plus typique de I'architecte de 
l'information : le plan de site. 



Realiser un plan de site 

Le plan de site est le resultat attendu d'un travail sur l'architecture de 
l'information. II representera les rubriques et les pages composant le site, 
ainsi que les relations qu'elles entretiennent. 

Le plan que vous allez imaginer doit permettre de situer un contenu a un 
endroit donne et de decrire les differentes manieres d'y acceder. Bien 
que l'endroit en question soit virtuel, pour etre atteint facilement, les 
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chemins qui y menent doivent avoir ete penses selon la logique des inter- 
nautes. Autrement dit, c'est un schema avec des boites et des fleches qui 
decrira l'organisation de votre site Internet. 



NAVIGATION PRINCIPALE 



0- 



Ijeuxdesocietel JEchecs, Poker Sciel Ueux a collectionnerl I Jeux de Roles I I Figurines I I Puzzle / Casse-tete I I Wargames I 
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NAVIGATION SECONOAIRE 
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I Poker ] I Echecs ] I Cartes a jouer I I Jeux de casino I I Jeux de plons I I Jeux de des I Jeux d'; 



NAVIGATION TERTIAIRE 



i suggestions personnel is ees Ma selection Compte client Panier RSS 



NAVIGATION GLOBALE (FOOTER} 



| Aide | | Qui iomme-nous ? | | Voire compte~| | Contacle; nous | | Mentions I eg ales | | Suivi 
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Figure 8-30 

Ce plan de site decrit la structure hierarchique 
de la rubrique Echecs, Poker & cie du site 
Reservoir Jeux. 
Source : www.reservoir-jeux.com 



Bien que Ton se situe toujours a un niveau abstrait (rien n'est encore for- 
malise sous forme de maquette de page), quand on regarde un plan de 
site, on comprend vite que les differents niveaux d' architecture vont 
devenir les differents niveaux de navigation d'un site. C'est pourquoi on 
integre les contraintes de l'ecran des cette phase de reflexion sur la struc- 
turation des contenus. 



Profondeur et largeur en architecture de ('information 

• Une architecture plate presente peu de niveaux de profondeur, mais 
beaucoup de rubriques par niveau. On a done moins de dies a effec- 
tuer pour arriver a chaque niveau, mais plus de difficultes a choisir un 
item a chaque niveau. En effet, I'activite de selection mentale depend 
du nombre d'items parmi lesquels on doit choisir. Moins il y a de pos- 
sibility, plus il est facile de choisir. 

• Une architecture profonde presente beaucoup de niveaux de profon- 
deur, avec un nombre plus limite de rubriques par niveau. 

• Bien sur, la solution optimale est un compromis entre largeur et pro- 
fondeur. Cependant, gardez a I'esprit que le nombre de dies n'est pas 
le critere ultime pour decider d'une structure d'information ou d'un 
flux d'interaction. En effet, il peut etre plus facile pour I'internaute 
de passer par un plus grand nombre d'etapes si le processus de deci- 
sion est a chaque fois facile et rapide. Ce qui doit influencer vos choix 
d'organisation est la difficulty de chaque action, et non le nombre 
d'actions requises pour atteindre un objectif. Pour en savoir plus, lisez 
au chapitre 2 notre remise en question de la regie des 3 dies. 



VOCABULAIRE Plan de site ou plan du site ? 

Ne pas confondre le plan de site de I'architecte de 
I'information avec le plan du site fourni a vos 
internautes en tant que page de votre site. 
Meme s'ils peuvent se ressembler, I'architecture de 
I'information representee sous forme de plan de 
site est un outil de travail et non le resultat final 
transmis a I'internaute. 
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OuilL Le vocabulaire visuel de JJG 

Jesse James Garrett, architecte de I'information 
tres en vogue, a mis a la disposition des concep- 
teurs web une bibliotheque d'elements visuels 
pour la representation de plans de site. 
Vous y trouverez de multiples elements illustrant 
pages, piles de pages, fichiers, connecteurs, fleches, 
noeuds decisionnels, bref, tous les objets necessaires 
pour formaliser une architecture de I'information 
(disponibles sous de nombreux formats). 
► http://jjg.net/ia/visvocab 



Citation 
La reflexion est votre meilleur outil 

Erin Malone, a propos des outils mis a disposition 
de I'architecte de I'information, nous dit que : 
« The knowledge, expertise and skills to solve pro- 
blems are right between our ears » (les connais- 
sances, /'expertise et les competences dont 
nous avons besom pour resoudre les pro- 
blemes se trouvent entre nos deux oreilles). 
Tous les logiciels du monde ne remplaceront pas 
votre capacite a penser une architecture de I'infor- 
mation centree utilisateur. lis ne peuvent que vous 
aider a traduire sous la meilleure forme possible le 
resultat de cette reflexion. 
► http://www.boxesandarrows.com/view/ 
thejtooLmakesjthe_wo_man 



Pour representer un plan de site, vous disposez de divers outils logiciels 
qui permettent d'obtenir rapidement un resultat clair et presentable. 
Ceux que nous indiquons au chapitre 9, dans notre repertoire de logi- 
ciels pour dessiner des zonings et maquettes, sont les plus interessants en 
termes de rapport efficacite/rendu final. 

Ce sont pour la plupart les memes que ceux recommandes pour la for- 
malisation de graphiques et schemas. Toutefois, s'y ajoutent des logiciels 
plus flexibles dans les possibilites de presentation et de rendu final 
(InDesign, par exemple). En effet, le plan de site etant avant tout un 
outil de communication, que ce soit en interne, avec le client ou au sein 
d'une equipe projet, vous devez tout mettre en oeuvre pour que sa forme 
traduise au mieux votre pensee. L' aspect esthetique entre done en ligne 
de compte dans la qualite finale de votre plan de site. 

Avant de lire cette liste, n'oubliez pas que le meilleur outil a votre dispo- 
sition reste le temps de reflexion que vous vous accordez. On ne repetera 
jamais assez de commencer par coucher sur le papier les premieres 
esquisses. C'est encore plus important dans les cas complexes, ou les 
possibilites de sortie en termes d'architecture sont multiples. 

Bien choisir ses mots 

L' architecture de I'information est principalement une affaire de mots. En 
effet, le mot est l'element principal sur lequel les internautes vont baser 
leurs decisions de navigation (du type « Je clique ou je ne clique pas ? »). 

Le libelle d'une rubrique est l'element qui va supporter l'activite de 
selection mentale d'une rubrique par rapport a une autre. Autrement dit, 
c'est sur la base du mot que l'internaute va decider de cliquer a tel ou tel 
endroit. Les libelles des rubriques, sous-rubriques et liens doivent done 
etre consideres comme des indices du contenu ou de la destination vers 
lesquels ils conduisent. 



La quete du mot ideal 

Un des seuls moyens de transmettre aux utilisateurs des indices sur le 
contenu d'une rubrique consiste a lui associer un mot : on doit done 
accorder une attention toute particuliere au choix des termes. 

• Votre objectif principal est de rendre l'internaute tout a fait sur de 
son choix lorsqu'il clique sur un element de navigation. Idealement, 
cette etape doit se faire de maniere si intuitive qu'il ne doit meme pas 
se souvenir d'avoir ete confronte a un choix. 
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A dire vrai, cet objectif est utopique. En effet, il est la plupart du temps 
extremement difficile, voire impossible, de trouver un terme exact pour 
decrire l'integralite du contenu d'une rubrique. Cette difficulte aug- 
mente lorsque la rubrique est volumineuse et/ou heterogene. 
Le libelle d'une rubrique doit donner un indice sur ce quelle con- 
tient. II ne peut pas decrire exactement l'ensemble de ses « enfants ». 
La plupart du temps, l'internaute choisit done de cliquer sur une 
rubrique parce que e'est celle qui semble le mieux correspondre au 
type de contenu recherche. 

• Votre objectif secondaire, lorsque vous choisissez un mot pour desi- 
gner une rubrique, est que l'internaute ne se trompe pas de rubrique. 
Si le choix qu'il effectue est un choix par defaut (aucun des autres 
items ne pouvant satisfaire son objectif) e'est en partie gagne : en 
effet, il atteindra une page lui permettant d'avancer dans l'accomplis- 
sement de sa tache. 

Plus realiste, cet objectif vous permet en outre de disposer d'une 
methode pour valider vos libelles, prenant la forme d'une question : 
Etes-vous sur que, pour accomplir une tache donnee, l'utilisateur n'a 
d'autre choix que de se diriger vers cette rubrique ? Travailler sur 
cette question vous permet d'essayer de supprimer toute ambiguite 
entre rubriques de meme niveau. 

• Ce que vous devez redouter par-dessus tout, e'est qu'un internaute 
fasse un mauvais choix et se retrouve sur une page ne repondant pas a 
ses attentes. En effet, il est alors oblige de faire machine arriere pour 
choisir un autre item de la meme liste. Et ainsi de suite jusqu'a 
trouver une page qui lui convienne. Autant d'etapes ou vous risquez 
de le perdre au profit d'un de vos concurrents ou de le voir aban- 
donner son objectif de depart. 

Dans cette etape de choix de libelles, la methode du tri de cartes vous sera 
de nouveau precieuse (elle est abordee au chapitre 10). Plus precisement, 
la phase de labellisation, ainsi que les commentaires des participants tout 
au long de la session de tri, vous permettront d'acceder au vocabulaire 
qu'ils utilisent pour decrire les contenus ou services que vous proposez. 

Integrer les contraintes specifiques du Web 

Au processus de selection que nous venons d'evoquer s'ajoutent des con- 
traintes liees a la recherche de termes destines a des sites Internet. Pour 
adapter vos libelles au format web, vous devez respecter deux principaux 
criteres. 
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Figure 8-31 

Le libelle de la rubrique Eco du site d'actualites 

de Yahoo! est un parfait exemple de concision. 

Source : fr.news.yahoo.com 



La concision : faites court ! 

La plupart du temps, les titres de rubriques doivent etre les plus courts 
possibles. Ce principe, qui semble logique sur tout type de medias (la 
concision assure la comprehension du lecteur), est accentue sur l'lnternet 
car on y ajoute des problematiques d'espace disponible a l'ecran. 

Imaginons que vous deviez trouver des libelles pour vos items de naviga- 
tion. Si votre barre de navigation est horizontale, vous etes limite par la 
largeur disponible a l'ecran. Lorsqu'elle est verticale, c'est egalement le 
cas (la colonne que vous consacrerez a la navigation ne doit pas etre trap 
large) ; vous etes aussi, dans une moindre mesure, contraint par la hau- 
teur visible a l'ecran sans scroller. 

Observez par exemple de quelle maniere les libelles de la navigation 
principale, sur le site d'actualites de Yahoo! France, sont reduits au 
maximum. Cet effort de concision sur chacun des termes permet de pre- 
senter toutes les rubriques necessaires sur une resolution d'ecran de 
800 x 600 pixels, sans devoir passer sur 2 lignes. Notez ainsi que la 
rubrique economique est nommee Eco : 



Dans ce livre Les conventions de vocabulaire 

Pour en savoir plus sur I'importance des conven- 
tions relatives au choix des mots sur votre site, 
rendez-vous au chapitre 5 pour lire la regie n° 4 : 
Conventions, et la regie n° 5 : Comprehension. 



Prendre en compte les conventions de vocabulaire 

On se comprend mieux quand on parle le meme langage. Vous devez 
integrer deux types de conventions pour selectionner les mots de votre 
interface. 

• Les conventions web : tous les sites Internet partagent un vocabu- 
laire pour designer les elements d'interface. Ainsi, certaines rubriques 
transversales a la plupart des sites sont toujours nominees de la meme 
maniere. II est done recommande d'adopter ces conventions de nom- 
mage pour faciliter la tache de navigation pour vos internautes. Par 
exemple, si un utilisateur a appris de ses experiences anterieures 
qu'un bouton Accueil permet de revenir a la premiere page d'un site, 
il n'aura pas a reapprendre le fonctionnement d'un tel bouton a chaque 
fois qu'il y sera confronte. 

• Les conventions du domaine : si tous vos concurrents nomment un 
objet de la meme maniere et que le terme en question est plutot bien 
choisi, n'esperez pas faire original en choisissant une autre appellation. 
Vous ne parviendriez qua generer la confusion chez vos utilisateurs. 
De la meme maniere, vous devez vous impregner du vocabulaire en 
vogue dans le monde reel. 
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Le choix des libelles pour les elements de navigation est done une etape 
complexe, qui mele des exigences de divers niveaux. Pour resumer, un titre 
de menu doit a la fois traduire ce que contient la rubrique, correspondre 
aux attentes des internautes, ne pas entrer en conflit avec les titres de 
meme niveau et se cantonner a l'espace qui lui est reserve a l'ecran. Le choix 
d'un libelle est done un jeu constant entre tous ces criteres. 

Finalement, le mot que vous choisirez pour illustrer votre rubrique sera 
forcement le resultat d'un compromis : dans ce contexte, et tous parametres 
pris en compte, vous selectionnez le terme offrant a vos internautes les 
plus grandes facilites de navigation sur votre site. 



Metier Architecte de I'information 

Lorsque I'ampleur du projet le necessite, une per- 
sonne peut prendre en charge les problematiques 
d'architecture de I'information. Elle sera alors res- 
ponsable de leur application et de leur vie tout au 
long du projet. En France, plus souvent, ce role est 
attribue a un ergonome, un concepteur ou un chef 
de projet. 
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Traduire 1'architecture par la navigation 

L' architecture de I'information est directement liee a ce qui la traduit sur 
un site Internet, a savoir tous les elements de navigation. Ce sont les 
menus, liens, boutons, qui permettent aux internautes de parcourir un 
site et de trouver (ou non) ce qui les interesse. 

Vous devez donner a l'internaute les memes outils que dans le monde reel. 
Lorsque 1'architecture de I'information est bien pensee et traduite en 
termes d'interface, elle facilite le reperage et la navigation de l'utilisateur 
dans un site, de la meme maniere que les indicateurs physiques permettent 
de se reperer et de se deplacer efficacement dans les espaces reels. 
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Figure 8-32 

Les panneaux indicateurs sont un des reperes 
qui nous aident a nous orienter dans la vie 
reelle. Sur le Web, ils sont represented par 
les elements de navigation. 
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Definition 
Architecture et navigation 

[.'architecture de I'information est la structure. 
La navigation est le moyen de parcourir cette 
structure. 



Lorsque vous concevez vos elements de navigation, il s'agit de concre- 
tiser la structure definie a l'etape precedente. Steve Krug dit a ce propos 
que la navigation nest pas une simple caracteristique d'un site Internet 
parmi d'autres, mais quelle est fondamentale puisque c'est elle qui 
definit un ici et un ailleurs. 

Les elements de navigation doivent permettre a l'utilisateur de repondre 
a tout moment aux questions suivantes : 

• Ou suis-je ? 

L'internaute doit reussir a se situer lors de son arrivee sur le site 
(quelle que soit la page sur laquelle il arrive, page d'accueil ou page 
interne) et a n'importe quel moment de sa visite du site. 
II va se demander s'il est au bon endroit pour trouver ce qui l'inte- 
resse. Autrement dit : « D'apres ce que j'en vois, est-ce que ce site est 
susceptible de m' aider ? Est-ce qu'il est envisageable que j'y trouve 
mon bonheur ? Ou dois-je passer mon chemin et aller ailleurs ? » 
Pour aider votre utilisateur a repondre a ces questions, vous devez 
reussir a transmettre en permanence l'identite de votre site, le type de 
contenus que vous proposez et l'etendue de votre offre. 

• Ou puis-je trouver ce qui m'interesse ? 

Un de vos objectifs principaux doit etre de servir l'utilisateur dans la 
realisation de sa tache. Ainsi, vous devez l'aider a savoir ou cliquer 
pour atteindre ce qui l'interesse, ou qu'il se trouve dans le site. 

• Qu'est-ce que ce site propose d'autre ? 

Un de vos objectifs complementaires doit etre de servir les exigences 
marketing du site. Ainsi, vous devez donner aux internautes une vision 
de ce que votre site propose d'autre, qu'il s'agisse d'un element ressem- 
blant a celui qu'il consulte a un instant t ou d'un element different. 

Nous avons aborde les bonnes pratiques permettant de ranger et de pre- 
senter vos contenus de la meilleure maniere possible : ils sont catego- 
rises, ranges, etiquetes, nommes. Si votre internaute cherche une 
information, votre architecture est done concue pour lui faciliter la vie et 
pour qu'il trouve effectivement cette information. 

Maintenant que vous avez decrit l'organisation de maniere generale, 
vous devez specifier ce qui doit se passer pour votre persona lorsqu'il 
accomplit ses differentes missions. Au-dela de l'architecture de I'infor- 
mation, vous devez done reflechir a la facon de guider les internautes 
lors de leur exploration et de leurs actions sur votre site. 
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Au-dela de la navigation : architecturer 
les parcours client et les interactions 

Lorsque Ton evoque l'optimisation des parcours client, on parle de 
quelque chose de lineaire. II ne s'agit plus de decrire l'architecture et les 
differentes manieres d'acceder a une information, mais plutot de tracer 
le parcours reel, pas a pas, de votre persona en train de realiser une 
action (que cette action soit de la consultation d'informations ou 
quelque chose de plus transactionnel). On ajoute done a la structure de 
l'information la composante temps. 

Cette formalisation des etapes par lesquelles vont passer vos internautes 
constitue done une suite logique de ce qui precede. Apres avoir reflechi 
sur l'architecture de 1'information de maniere generale, vous allez vous 
en servir pour optimiser le parcours de votre persona sur le site. Notez 
que, lors de cette etape, vous pouvez avoir besoin de revenir en arriere et 
de modifier des choix relatifs a l'architecture de l'information. 

Pour decrire le parcours de votre persona, vous aurez besoin de deux 
niveaux de detail : le parcours client et les flux d'interaction entre le site 
et l'internaute. Le parcours client represente la navigation sous forme 
d'etapes successives et peut etre ponctue de descriptions des flux d'inte- 
raction (s'il existe des echanges entre le site et l'internaute). Lorsque le 
parcours client necessite une reponse de la part du systeme, on specifie 
tous les flux d'interaction possibles entre l'internaute et le systeme. 

On ne decrit les parcours client et les flux d'interaction que pour les mis- 
sions des personas, autrement dit pour les actions les plus frequentes sur 
le site. En outre, ce type de specifications n'a d'interet que si la tache 
visee inclut des processus transactionnels. II s'agit done principalement 
de decrire les actions que l'internaute peut effectuer sur votre site. Com- 
ment allez-vous le concevoir pour qu'il optimise l'achat, l'inscription, la 
creation d'un compte utilisateur, etc. ? 

Pour chacune de ces missions, vous devrez penser a tous les cas possi- 
bles. Normalement, specifier les parcours clients et les flux d'interaction 
doit vous permettre de calculer le nombre de pages, d'etapes, et leur 
ordre de parcours par vos internautes, en fonction des contextes 
possibles : parcours ideal, erreur, etc. 



METHODOLOGIE Et si je saute cette etape ? 

On ne saute pas un parcours client. On le concoit 
plus ou moins bien mais, de toutes facons, il est 
con^u. Si vous consacrez un peu de temps et 
d'energie a optimiser les flux d'interaction princi- 
paux de votre site, vous serez sur de fournir a votre 
internaute une experience d'utilisation confortable. 



Remarque Utilisabilite du parcours client : 

une problematique a la fois 

generale et specifique 

L'utilisabilite des parcours clients doit etre envi- 
sagee dans divers cas de figure : a la fois au 
niveau du fonctionnement general du site, mais 
aussi au niveau de micro-fonctionnements. 



VOCABULAIRE « Pas besoin d'optimiser 

le parcours client, mon site 

n'a pas de client » 

On parle de parcours client pour tous les types de 
site. Ce terme, a I'origine employe pour les sites de 
commerce en ligne, a ensuite ete applique a 
I'ensemble des sites pour lesquels on doit decrire 
le parcours attendu de l'internaute. Tous les visi- 
ters sont alors considered comme des clients, 
meme si il n'y aucune transaction commerciale 
entre l'internaute et le site. 
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Tableau 8-1 Le rapport entre le plan de site et le flux d'interaction 



Plan de site 


Flux d'interaction 


Un plan de site est statique. 


Le flux d'interaction est dynamique : il depend des 
actions de I'internaute et des reponses du systeme. 


II decrit I'ensemble des chemins 
possibles. 


II decrit le chemin emprunte par un persona qui cherche a 
accomplir un objectif donne. 


II decrit comment I'internaute 
peut acceder a un contenu. 


II decrit comment I'internaute accede effectivement a 
un contenu et realise des actions sur un site. 


II decrit I'exhaustivite des rubri- 
ques d'un niveau. 


II decrit le passage par une de ces rubriques. 


II s'interesse a la page en tant 
que telle. 


II ne s'interesse qu'au type de page. 


Le vocabulaire est une des pre- 
occupations principales. 


C'est essentiellement une affaire d'optimisation des 
interactions : ce qui importe c'est est le parcours et les 
flux d'informations, et non le nom que portent chacune 
des rubriques ou des pages. 


On ne decrit pas forcement les 
liens transversaux. 


On imagine des liens transversaux et on les formalise en 
fonction des besoins lies a I'optimisation du flux d'interac- 
tion. 



Vocabulaire Transactionnel ? 

On distingue sur le Web deux grands modes d'interaction : 

• La navigation, oil I'internaute passe de page en page et consulte des informations, 
plutot sur un mode passif, dans le sens ou la transmission d'informations est a sens 
unique : de I'ordinateur a I'internaute. Les actions de I'internaute sont principalement des 
dies sur des liens. 

• La transaction, ou il entre veritablement en interaction avec le systeme pour accom- 
plir des actions. La, I'internaute a un role plus actif : les flux d'informations vont dans les 
deux sens. L'internaute fournit au systeme des informations le concernant ; ce dernier tient 
compte de ces entrees pour y adapter sa reponse. Dans ce type d'interaction, I'internaute 
effectue des choix. Ses actions sont principalement de type die sur des interfaces de selec- 
tion (listes deroulantes, cases a cocher, boutons radio) et de validation (boutons d'action, 
touche Entree), ou saisie d'informations au clavier. La recherche par mot-cle, I'achat en 
ligne, la creation d'un compte utilisateur, sont typiquement de type transactionnel. 



L'optimisation des parcours clients a toujours pour objectif de vous 
adapter aux besoins et comportements de vos personas. Le plus impor- 
tant est de prendre en compte le comportement de vos internautes et de 
vous y conformer au plus pres (voir la regie n° 7 du chapitre 5). 

Prenons un exemple. Sur le site de Google, lorsqu'un mot-cle est present 
dans le champ de saisie et que I'internaute clique sur le lien Images, le 
fait de lancer automatiquement la recherche d'images releve de l'optimi- 
sation du flux d'interaction. 
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Qu'Amazon nous propose de cocher une case pour definir nos donnees 
par defaut traduit egalement une optimisation du parcours client. En 
effet, Amazon propose cette fonctionnalite afin que, la prochaine fois et 
apres identification, on tombe directement sur la page de resume. Ici, on 
laisse a l'internaute la liberte de choisir son propre flux d'interaction en 
fonction de ses preferences. En tant que concepteur, on se contente de 
prevoir les flux d'interaction qu'on lui propose. 

C'est encore le meme type de problematique que vous traitez lorsque vous 
choisissez un mode d'interaction pour une fonctionnalite de recherche 
(autrement dit, lorsque vous choisissez si Faeces a la recherche avancee se 
fait par un clic sur un lien menant vers une nouvelle page ou si les options 
de recherche avancee sont presentees directement dans la page de resultats 
d'une recherche simple). En effet, le choix entre les deux modes d'interac- 
tion aura un impact sur le nombre d'etapes pour l'internaute. 

C'est aussi le cas pour le processus d'ajout au panier. A l'etape d'architec- 
ture de 1'information, vous avez decide qu'il existait une page produit et un 
panier ou l'internaute place les produits qu'il souhaite acheter. Mainte- 
nant, vous devez decider de la maniere dont se deroule l'ajout d'un article 
au panier. Ainsi, il existe 4 flux d'interaction tres differents pour la meme 
action de depart, a savoir un clic sur un bouton Ajouter au panier : 

• Soit vous decidez que l'ajout d'un produit au panier y conduira l'inter- 
naute. C'est par exemple le cas sur les sites de LDLC ou d'Aigle. 
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Figure 8-33 

Sur le site d'Aigle, apres avoir ajoute un article 
au panier, l'internaute est dirige vers la page 
du panier. 
Source : www.aigle.fr 



Soit vous decidez que l'ajout d'un produit au panier emmenera 
l'internaute vers une page de confirmation d'ajout au panier. C'est 
par exemple le cas sur le site de la Redoute ou de la Fnac. 
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Figure 8-34 

Sur le site de la Fnac, apres avoir ajoute un 

article au panier, I'internaute est dirige vers 

une page de confirmation d'ajout au panier, 

ou on lui recommande aussi d'autres articles. 

Source : www.fnac.fr 
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Soit vous decidez que l'ajout d'un produit au panier laissera I'inter- 
naute sur la page produit, en lui affichant la confirmation d'ajout sous 
la forme d'une fenetre superposee au site et demandant une action de 
sa part. C'est par exemple le cas sur les sites d'Alapage, de Rue du 
Commerce, de Norauto ou de Castorama. 



Figure 8-35 

Sur le site de Rue du Commerce, suite a l'ajout 
d'un article au panier, on propose a I'inter- 
naute plusieurs choix de navigation, dans un 
panneau flottant s'affichant par-dessus la 
page produit. 
Source : www.rueducommerce.fr 
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Soit vous decidez que l'ajout d'un produit au panier laissera I'inter- 
naute sur la page produit, en lui affichant la confirmation d'ajout 
directement dans la page, sans requerir d'action de sa part. C'est par 
exemple le cas sur les sites de Reservoir Jeux, de Pimkie ou de Kiabi. 
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Figure 8-36 

Sur le site de Reservoir Jeux, suite a l'ajout 
d'un article au panier, on affiche ce dernier 
dans le resume du panier disponible directe- 
ment dans la page. L'internaute a ensuite le 
choix de continuer sa navigation ou de cliquer 
sur le bouton Passer votre commande. 
Source : www.reservoir-jeux.com 
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Ces 4 flux peuvent etre repartis en deux grands types d'interaction : deux 
solutions ou l'internaute reste sur la page produit et deux solutions ou il 
est conduit sur une autre page. Chacun de ces flux d'interaction presen- 
tant des avantages et des inconvenients, vous devez tout faire pour 
limiter les inconvenients de la solution choisie. Par exemple, si vous 
optez pour le maintien de l'internaute sur la page produit, il faut que cela 
ait une reelle utilite en termes de parcours utilisateur. Vous ne devez 
choisir cette solution que si vous etes capables de fournir de nombreuses 
solutions de navigation ou de consultation de contenu a partir de la page 
produit et/ou un bouton d'action pour passer la commande. C'est 
notamment ce que fait le site de Reservoir Jeux. 

Faites attention au fait que les flux d'interaction posent souvent pro- 
bleme lorsque l'internaute sort du chemin classique, celui qu'on le sou- 
haite voir emprunter. 

Les flux d'interaction servent a decrire les etapes d'un cheminement 
sous forme schematique. Une fois que vous avez bien reflechi a la 
maniere dont doit fonctionner votre systeme, il est temps de passer a sa 
presentation a l'ecran. Le chapitre suivant vous aidera dans cette etape 
de concretisation sous forme de zonings et de maquettes conceptuelles. 



En bref : obtenir des bases solides 
pour la suite 

Malgre leur place privilegiee en amont, vous devez garder a l'esprit, tout 
au long du projet, les problematiques d'architecture et d'interaction. 
Certains choix peuvent ainsi etre remis en question lors de leur confron- 
tation a des problematiques d'utilisabilite, de marketing, de strategic, 
d'implementation technique, etc. 

Loptimisation de l'architecture de l'information et des parcours client 
restent encore du domaine de l'abstrait (c'est finalement le cas tant que 
Ton ne represente pas les choses sous forme d'un ecran). Maintenant que 
votre contenu est bien structure en fonction des besoins de vos utilisateurs, 
passons a la concretisation de ces principes a l'ecran. 
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chapitre 
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Passez a I'ecran : 
zonings et maquettes 



Tout est pret, vous avez enumere et organise vos contenus, puis 
vous avez decide des grands principes d'interaction ? Alors 
vous pouvez passer a I'ecran pour traduire ces choix en termes 
d 'interface. 



SOMMAIRE 

Decoupage de la page 
sous forme de zoning 

Detail de chaque zone 
sous forme de maquette 

Outils logiciels pour 
le maquettage 

MOTS-CLES 

Zoning 

Maquette 

Ecran 

Fold 

Pixel 

Storyboard 

Specifications ergonomiques 



Apres avoir organise le parcours des internautes dans votre site web, vous 
devez passer a un niveau de detail plus avance en specifiant le contenu de 
chaque page. Vous passez done de la reflexion sur la structure et la naviga- 
tion a un travail sur l'organisation visuelle des elements a l'ecran. C'est le 
moment de traduire en termes concrets des observations que vous avez 
peut-etre amorcees a l'oral ou dans des documents de specifications ecrits. 

A cette etape, vous recommandez done davantage que « ce que doit per- 
mettre l'interface » : vous specifiez l'interface elle-meme, afin qu'il ne 
reste plus qua la realiser. Deux grands types de livrables doivent resulter 
de ce travail : des zonings et des maquettes conceptuelles. 



METHODOLOGIE Et si je saute cette etape ? 

La phase de specifications de l'interface sous forme de zonings et de maquettes est primor- 
diale pour le bon deroulement d'un projet web sur le plan ergonomique. On peut a ce stade 
distinguer deux grands types d'orientations donnees aux projets : d'une part, ceux ou Ton ne 
donne de specifications qu'en termes d'objectifs (de type : « l'interface doit permettre a 
I'internaute de se creer un compte client ») et, d'autre part, ceux qui redigent des documents 
de specifications exprimes en termes de moyens (decrivant comment se presente l'interface 
de creation d'un compte client). Entre ces deux modes de fonctionnement, la difference est 
nette. 

En specifiant precisement I'apparence et le comportement de l'interface au niveau conceptuel, 
vous allegez enormement la charge de travail des designers et developpeurs, qui peuvent ainsi 
se concentrer sur I'essentiel de leur metier. Si vous omettez les specifications visuelles des 
ecrans, vous risquez de devoir passer beaucoup plus de temps en corrections, si tant est que ce 
soit possible au niveau technique. En effet, lorsque l'interface est deja realisee, il est parfois trop 
tard pour des ajustements ergonomiques. Prenez done les devants, et faites les choses dans 
I'ordre ! 



Ces documents peuvent etre realises aussi bien dans le cadre d'une crea- 
tion de site que lors d'une refonte totale ou partielle (par exemple, on ne 
touche que les barres de navigation, le formulaire d'inscription, la pre- 
sentation des actualites, etc.). C'est done au jour le jour que vous pouvez 
etre amene a realiser des zonings et maquettes. Normalement, pour la 
moindre modification consequente de l'interface, les equipes de deve- 
loppement doivent recevoir une maquette conceptuelle annotee, leur 
fournissant une base et des directions de travail. 

L'erreur la plus courante dans les projets web francais consiste a se jeter 
sur le design graphique avant meme d'avoir reflechi a ce qu'allait con- 
tenir le site (voir a ce propos le chapitre 7), a l'organisation de ce con- 
tenu dans le site (chapitre 8) et dans la page (ce chapitre). Resultat : des 
sites jolis mais mal penses, qui ne peuvent pas satisfaire leurs visiteurs. 
Pour eviter cet ecueil, vous devez specifier vos interfaces en deux etapes 
que nous allons aborder de suite. 
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Le zoning : un premier decoupage 

Formaliser vos recommandations sous forme d'ecrans doit se faire etape 
par etape. Ne vous precipitez pas sur la specification detaillee d'elements 
d'interface avant d'avoir decide de l'organisation generate de la page. 

Votre premier travail consiste done a fabriquer ce que Ton appelle des 
zonings. Ces documents representent les grands espaces d'information 
composant une page. II s'agit de decouper cette derniere en autant de zones 
que necessaire. Ainsi, vous choisissez l'emplacement de votre navigation, 
les differentes parties de votre cceur de page, les outils, etc. 



i 

a. 



Espace disponible et principes de repartition 

Avant de commencer a positionner vos zones a l'ecran, vous devez savoir 
de quel espace vous disposez. Pour cela, vous devez fixer une resolution 
cible, qui servira de base pour optimiser vos specifications. II s'agit de 
prevoir l'interface de votre site en fonction de la configuration informa- 
tique de vos internautes. Pas question de concevoir une page qu'ils ne 
pourraient pas voir en entier parce que l'espace ecran est trop petit ! 

Opter pour une resolution cible ne vous empeche toutefois pas de prendre 
en compte les resolutions inferieures et superieures. 

Attention : les statistiques de resolutions d'ecran fournies par votre serveur 
sont presque exclusivement basees sur l'interrogation des navigateurs de 
vos visiteurs. On leur demande : « En quelle resolution etes-vous? ». Les 
resultats obtenus ne sont done qu'une indication des resolutions d'ecrans 
chez vos visiteurs, et rien de plus. Au-dela de 9a, vous n'avez aucune idee 
de l'affichage reel de la fenetre de navigateur chez vos internautes. 

Or ce n'est pas parce que vous visez une resolution de 1 024 x 768 pixels 
que vous disposez de la totalite de cet espace pour votre site ! En effet, 
en fonction des reglages des ecrans et des navigateurs, on dispose de plus 
ou moins de place. Si Ton se base sur une fenetre de navigateur ouverte a 
sa taille maximale (ce qui n'est pas toujours le cas), certains elements sont 
incompressibles et limitent l'espace fibre pour afficher le site Internet. II 
s'agit de la barre de titre, de la barre de menus, eventuellement d'une 
barre d'onglets, d'une barre d'outils, d'une barre de chargement et des 
cotes du navigateur. 

Selon les systemes d'exploitation et les navigateurs, ces elements n'occu- 
pent pas tous le meme espace. Vous devez done recouper l'information 
des resolutions d'ecrans avec celle sur les navigateurs utilises. La diffe- 
rence la plus importante entre les navigateurs se situe surtout au niveau 
vertical. II existe toutefois aussi une difference au niveau horizontal entre 
les navigateurs, selon qu'ils affichent un espace reserve a l'ascenseur vertical 



VOCABULAIRE Taille et resolution d'ecran 

La taille d'un ecran (mesuree en pouces) ne deter- 
mine pas le nombre de pixels qui peuvent etre affi- 
ches a l'ecran. Ce parametre est controle par ce que 
Ton appelle la resolution d'ecran. Ainsi, un ecran 
1 7 pouces et un 19 pouces peuvent avoir la meme 
resolution, e'est-a-dire afficher le meme nombre de 
pixels. Ce que vous verrez sur l'ecran 1 9 pouces sera 
alors plus grand que sur le 17 pouces, mais vous 
verrez strictement le meme nombre de choses. 
Prenez done en compte la resolution plutot que la 
taille des ecrans de vos visiteurs. 
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ASTUCE Pensez au futur ! 



Lorsque vous prenez des decisions dependant des 
resolutions des ecrans de vos internautes, il faut 
aussi tenir compte du fait qu'un site n'est pas uni- 
quement congu pour une utilisation immediate 
apres mise en ligne (mais souvent pour les quel- 
ques mois ou annees qui suivront). 



de maniere systematique (Internet Explorer) ou seulement au besoin 
(Firefox). Prenez comme reference le navigateur qui vous laissera le 
moins d'espace pour placer vos elements a l'ecran. 

Le plus difficile reste de juger des configurations personnalisees de vos 
visiteurs : ils peuvent choisir d'utiliser de petites ou de grandes icones 
pour leur menu de navigateur, d'afficher un panneau de favoris sur la 
gauche, d'ajouter diverses barres d'outils au navigateur, etc. Tous ces ele- 
ments vont reduire l'espace disponible a l'ecran pour l'affichage du site. 
Toutefois, les visiteurs disposant des plus faibles resolutions semblent 
avoir l'habitude d'exploiter au maximum la dimension horizontale de 
leur ecran pour l'affichage des sites Internet. Basez-vous done sur la 
configuration par defaut des navigateurs cibles. 



METHODOLOGIE Comment puis-je prendre en compte une resolution de 800 x 600 pixels 
ou de 1280 x 1024 si ma resolution cible est de 1024 x 768 ? 



II faut bien comprendre que la notion de resolution 
cible n'est qu'un outil methodologique pour vous aider 
a concevoir vos pages. Elle represente seulement la 
resolution optimale, e'est-a-dire celle que vous avez 
prevu pour un affichage ideal du site. La resolution 
cible existe done uniquement parce que vous devez 
vous poser des limites. 

Or il faut savoir que les resolutions d'ecran sont un para- 
metre assez variable chez les internautes. Nous verrons 
d'ailleurs par la suite que ce seul parametre ne suffit pas 
pour juger de la portion d'ecran reservee a l'affichage 
du site. Autrement dit, vous devez necessairement vous 
interroger sur ce point : que va-t-il se passer si vos inter- 
nautes ne disposent pas de la resolution cible ? 
Tout d'abord, veillez a utiliser vos outils de conception 
ou a les configurer de maniere a pouvoir controler, de 
temps en temps, I'apparence qu'aura votre site si la 
resolution d'ecran de I'internaute differe de la cible 
attendue. Nous aborderons ces outils a la toute fin du 
chapitre. Ce type de controle, a realiser surtout en 
amont de la conception, lorsque vous dessinez le 
zoning et positionnez les espaces de navigation, peut 
ainsi vous amener a choisir entre une navigation princi- 
pale horizontale ou verticale, ou a decider du position- 
nement d'un logo. 

De maniere plus large, la solution qui semble la plus 
adaptee pour absorber differentes resolutions d'ecran 
est ce que I'on appelle le design semi-elastique, semi- 
fluide ou semi-liquide. Cette technique se situe a mi- 
chemin entre un design totalement rigide et un design 
totalement liquide. En semi-elastique, seules certaines 



colonnes s'etendent si elles beneficient de place sup- 
plementaire. En general, ce sont les colonnes de 
contenu ; en revanche, on garde fixes les colonnes de 
navigation et les gouttieres (qui sont les interstices 
vierges entre colonnes de contenu). Le meme principe 
s'applique lorsque les contenus ne disposent pas de la 
place attendue. Grace au design semi-elastique, ces 
colonnes sont capables de se reduire en largeur. 
Pour aller encore plus loin, considerez la possibility de 
limiter la largeur de certaines colonnes. Les proprietes 
min-width et max-width des CSS2 permettent ainsi de 
fixer les largeurs minimale et maximale de vos 
colonnes (quelques contournements techniques vous 
permettront aussi de le faire sous Internet Explorer 6, 
qui ne comprend pas bien ces proprietes). 
Ce dernier reglage est tres interessant pour optimiser la 
lisibilite de vos textes, puisqu'il permet d'obtenir des 
lignes de texte ni trop courtes, ni trop longues. Lorsque 
la largeur d'une ligne de texte est trop faible, la lecture 
est trop saccadee par les nombreuses interruptions dues 
aux changements de ligne. A I'inverse, lorsqu'une ligne 
est trop longue, il est difficile de passer d'une ligne a 
I'autre. Dawn Shaikh montre en 2005 que la longueur 
optimale pour faciliter la lecture est de 95 caracteres par 
ligne. On s'accorde conventionnellement sur un inter- 
vals compris entre 60 et 100 caracteres. Vous devez 
done faire la conversion, en termes de pixels, en fonc- 
tion de votre police et de votre taille de caracteres. 
Notez que I'on parle ici de design pour evoquer ('inte- 
gration technique du site. Rien a voir done avec le 
design graphique. 
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Ainsi, la resolution cible vous donnera des limites pour les dimensions 
horizontale (vous savez que vous disposez de X pixels de large) et verti- 
cale (vous disposez de X pixels de hauteur visible a l'ecran). Void quel- 
ques reperes pour determiner l'espace utilisable a l'ecran. Ces reperes 
sont bases sur le pire des cas, c'est-a-dire les navigateurs (parmi ceux 
dont le taux de penetration depasse 3 % dans la population generate) 
laissant le moins de place disponible. Ces reperes sont valables pour la 
plupart des sites, mais veillez a les adapter a votre contexte. Par exemple, 
si vous connaissez precisement le pare informatique d'ou sera consulte 
l'intranet sur lequel vous travaillez, basez-vous sur ces informations pour 
concevoir votre interface sur-mesure. 

Tableau 9-1 Espace disponible en fonction des resolutions d'ecran 



Resolution cible 


Largeur maximale 


Hauteur visible a l'ecran 


800 x 600 pixels 


780 pixels 


400 pixels 


1024x768 pixels 


1000 pixels 


570 pixels 


1280x1 024 pixels 


1260 pixels 


820 pixels 


a x b pixels 


(a - 20) pixels 


(b - 200) pixels 



Aller plus loin 
Statistiques de folds par ClickTale 

D'apres le recensement effectue par ClickTale fin 
2006 sur 120 000 pages vues, les 3 pics de folds 
pour une resolution de 1024 x 768 pixels sont, du 
plus frequent au moins frequent : 600, 590 et 570 
pixels. La difference entre les trois est toutefois 
tres faible. La part de folds constates a 600 pixels 
ne represente d'ailleurs que 10% de I'ensemble 
de ceux de I'etude. En vous basant sur 570 pixels, 
vous considerez done la reference la plus basse 
des plus hauts taux de folds. Ainsi, vous vous 
assurez qu'un nombre maximal d'internautes ver- 
ront ce que vous presentez au-dessus de ce seuil. 
Pour lire I'etude complete : 
► http://blog.clicktale.com/?p=19 
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L'espace horizontal : une limite maximale 

Vous pouvez considerer la limite horizontale comme une limite finie, 
c'est-a-dire que vous ne pouvez pas la depasser sous peine d'obtenir un 
ascenseur horizontal. Or vous devez vous l'interdire : les internautes 
hont pas l'habitude de voir ce type d'ascenseurs et ils ne les aiment 
generalement pas du tout. Vous risquez done, soit que vos visiteurs 
ratent quelque chose parce qu'ils ne le voient pas et n'ont pas le reflexe 
d'actionner l'ascenseur horizontal, soit de les enerver en utilisant ce type 
de presentation qui leur demande beaucoup d'efforts. 




Figure 9-1 

Sur le site de Coca-Cola Blak, le pourtour 
du site permet d'installer le site 
dans une ambiance graphique dediee. 
Source : www.coca-colablak.fr 
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II peut cependant etre important d'adapter ce maximum en fonction des 
exigences graphiques et/ou marketing. Par exemple, si votre site est 
centre dans la page, il peut etre appreciable d'avoir quelques dizaines de 
pixels a disposition de chaque cote afin d'installer le site dans un contexte 
visuel specifique (figure 9-1). Cet espace autour du site est parfois aussi 
utilise en tant que zone publicitaire. 



Figure 9-2 

Sur le site d'Allocine, le pourtour du site est 

utilise en tant qu'espace publicitaire. 

Source : www.allocine.com 




Dans ce livre L'ascenseur vertical et le 
scroll : qu'en disent les internautes ? 

Pour en savoir plus sur les implications qu'a le 
franchissement du fold dans votre conception de 
page, rendez-vous au chapitre 2 : (re)lisez-y I'idee 
recue selon laquelle les internautes ne scrollent 
pas (ou n'aiment pas scroller). 



L'espace vertical et la notion de fold 

La limite verticale fournie par la resolution d'ecran n'est, quant a elle, 
pas une limite absolue. Elle indique ce qui sera visible a l'ecran sans 
scroller. On parle de cet espace comme etant « above the fold ». hefo/d, 
c'est cette ligne virtuelle representant le bas de l'ecran, au-dela de 
laquelle il faut descendre pour voir la suite de la page. Un site Internet 
n'est pas limite en hauteur et vous pouvez utiliser a loisir l'ascenseur ver- 
tical, en prenant toutefois en compte ce que cela sous-entend. 

Dans le domaine du Web, on utilise la notion de fold par analogie avec 
le monde des journaux papiers. Ces derniers, plies sur les presentoirs des 
kiosques et librairies, ne devoilent que leur partie superieure, celle situee 
avant la pliure (« fold » en anglais). 



Figure 9-3 

La metaphore du journal plie sert d'appui pour 
expliquer la notion de fold sur le Web. 




340 






II est primordial que l'espace au-dessus du fold contienne a minima 
l'identite de votre site, la navigation principale, les outils fonctionnels 
(de type recherche ou connexion au compte client) et les informations 
capitales pour vos visiteurs. Prenez en compte qu'il peut suffire que 
l'espace au-dessus du fold indice l'existence de contenus sous le fold 
(cette idee est aussi illustree au chapitre 2). 

Attention, veiller a cette limite horizontale ne doit pas vous obliger a 
concentrer tous les elements fonctionnels de votre page au-dessus du 
fold. Ainsi, la grande difficulte dans la realisation ou l'audit d'un zoning 
reside dans le necessaire equilibrage entre des besoins marketing ou 
d'image et des besoins fonctionnels. 

Observez a cet effet le site de Clarins : dans chacune des rubriques prin- 
cipales, une large place est offerte a l'image et au positionnement de 
marque de Clarins sur le type de produits consultes. Ces bandeaux 
visuels sont essentiels a la coherence de la marque telle que la connais- 
sent ses clients dans le monde reel : ils permettent d'installer le site dans 
cette coherence globale. 
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Figure 9-4 

Partie visible d'une page du site de Clarins en 
resolution 1 024 x 768 pixels : une grande part 
de l'espace ecran est occupee par de l'image. 
Dans ce cas, e'est justifie car cela contribue a 
la fois aux objectifs du site et aux objectifs de 
la marque. 
Source : www.clarins.fr 



Sur ce site, on ne considere en aucun cas que ces bandeaux graphiques 
constituent une perte de place en hauteur. Ce qu'il faut surveiller par 
contre, e'est que Ton voie bien le debut de la liste de produits avant le 
fold. Ainsi, vous beneficiez a la fois de la presence forte du visuel et de 
l'indice du debut de liste. 
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Ce compromis est envisageable de par la frequence d'utilisation sup- 
posed du site de Clarins : ce n'est pas un site que Ton consulte tous les 
jours ou toutes les semaines ; on s'y rend plutot pour satisfaire une envie 
particuliere ou un besoin d'achat ponctuel. Cette presentation permet de 
satisfaire ces usages tout en conservant les valeurs de Clarins. On privi- 
legie ainsi les univers et les visuels produits, plutot que de mettre en 
avant des prix. 

Vous pouvez d'ailleurs remarquer que Ton ne voit pas de prix avant le 
fold, ces derniers n'apparaissant que plus bas dans la page. Ce principe, 
qui pourrait etre un defaut sur d'autres sites de commerce en ligne, 
devient neutre sur le site de Clarins puisqu'il entre en concordance avec 
les valeurs de la marque. II est important de tenir compte du fait qu'un 
site Internet doit relayer la vie de la marque a l'exterieur. 

Les types de zones 

Selon la page sur laquelle vous travaillez, vous devrez integrer differents 
types de zones. On commence generalement par concevoir un zoning 
general qui accueillera de la meme maniere les differents types de pages. 
Ainsi, on definit les elements qui apparaitront de maniere identique sur 
toutes les pages du site. Ce zoning general est ensuite contextualise 
selon la page specifiee. 

Vous n'etes pas tenu de realiser des zonings pour chacune des pages, 
mais au moins pour les plus importantes : page d'accueil, page de 
rubrique, page de liste, page produit, page article, etc. A l'interieur de 
ces pages, vous definirez les emplacements des zones suivantes : 

• identite et positionnement du site ; 

• espaces de navigation ; 

• espaces de mise en avant de contenus ; 

• outils ; 

• pied de page ; 

• espaces publicitaires ; 

• auto-promotions ; 

• 

Conjointement a ces zones, vous pouvez fournir des indications de hie- 
rarchie visuelle. Autrement dit, s'il est necessaire en termes ergonomi- 
ques qu'une des zones soit beaucoup plus forte visuellement que les 
autres, vous devez l'indiquer afin que le directeur artistique en tienne 
compte des ses premieres recherches. 

Le zoning est un document generaliste et assez grossier : il est tres peu 
detaille et c'est precisement son role (un niveau de detail supplemental 
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viendra lors de la conception des maquettes). Cependant, sa conception 
vous demandera parfois d'aller plus loin afin de verifier sa viabilite ulte- 
rieure. Par exemple, si votre barre de navigation principale contient 
beaucoup d'elements, vous devrez tester si « 9a rentre » avant de decider 
de son positionnement. Ainsi, n'hesitez pas a essayer de poser tous vos 
elements de maniere horizontale et verticale, pour revenir par la suite a 
une vue moins detainee. Si vous ne le fakes pas, vous risquez de pro- 
poser un zoning inapplicable par la suite. 



1 

a. 



Le zoning par I' exemple 

Pour bien comprendre l'utilite d'un zoning, en voici deux exemples sur 
deux types de pages tees differents. Le premier concerne la page 
d'accueil du site Formation des editions Lamy : 




OUTILS / NAVIGATION GENERIQUE 



NAVIGATION PRINCIPALE 



CATALOGUE > 3 DOMAINES 

(FORMATIONS INTER-ENTREPRISES) 



La hierarchie visuelle est indiquee par la 
hierarchie de couleurs suivante : 



Logo, navigation principale 

Catalogue inter-entreprises 

Sur-mesure, raccourcis 
fonctionnels, auto-promo 

Outils / Navigation generique, 
pied de page 



SUR-MESURE 

(FORMATIONS 
INTRA-ENTREPRISES) 



RACCOURCIS FONCTIONNELS 



AUTO-PROMO 



Figure 9-5 Zoning de la page d'accueil du site Lamy Formation (groupe Wolters Kluwer). 
Source : specifications ergonomiques pour la refonte du site www.lamy.fr 

Le zoning nest pas a considerer a la legere. II vous permet notamment 
d'installer des principes essentiels, tout en restant a un niveau d'abstrac- 
tion eleve. Ainsi, dans le zoning de la fiche produit du site Reservoir 
Jeux (figure 9-6), vous constatez que Ton decide deja de supprimer toute 
navigation secondaire ; on reserve ainsi toute la largeur de la page a la 
fiche produit. 
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OUTILS / NAVIGATION GENERIQUE 




VISUEL 
PRODUIT 



DETAILS 
PRODUIT 



NAVIGATION 
TRANSVERSALE 




CROSS 
SELLING 



EXTENSIONS 



COMMENT AIRES 



La hierarchie visuelle est indiquee par la 
hierarchie de couleurs suivante : 



Logo, recherche, visuel produit, 
feedback achat / selection 



Navigation principals, fil d'ariane, 
achat /selection 



Outils / Navigation generique, micro-panier, 
cross-selling, extensions, commentaires 



Details produit, navigation transversale 



Descriptif produit, pied de page 



Figure 9-6 Zoning de la page produit du site Reservoir Jeux. Le resultat du zoning sur le site reel : www.reservoir-jeux.com 



VOCABULAIRE 
Maquette conceptuelle et synonymes 

Les maquettes conceptuelles portent divers noms 
selon les environnements de travail : maquettes 
fonctionnelles, maquettes ergonomiques, story- 
boards, wireframes, ergo layouts, etc. (elles sont 
meme parfois appelees zonings). 



La maquette conceptuelle : chaque zone 
en detail 

La suite logique du zoning consiste a remplir chacune des zones. C'est 
l'objectif de la redaction de maquettes. Par exemple, si le zoning a 
indique qu'un formulaire se trouvait a un endroit de l'ecran, vous devez 
maintenant le specifier en detail. S'il a indique qu'une zone d'auto-pro- 
motion se trouvait a un endroit de l'ecran, vous allez vous demander ce 
que vous allez y mettre et suivant quelle presentation. 

On parle bien ici de maquette conceptuelle (ou maquette ergonomique), 
c'est-a-dire que rien n'evoque encore l'allure graphique que prendra le 
site final. Ce qui nous interesse lors de cette etape est d'abord de refle- 
chir et de specifier l'interface du site d'un point de vue fonctionnel et 
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ergonomique. II s'agit vraiment de decrire le plus precisement possible 
tout l'ecran, en faisant en premier lieu abstraction de considerations gra- 
phiques. Notez toutefois que, si vous etes en phase de refonte, il peut 
etre interessant de reprendre le design graphique existant et d'en partir 
pour apporter vos modifications. 

La maquette doit repondre a chacune des regies ergonomiques evoquees 
au chapitre 5. Prise dans son ensemble ou detail apres detail, elle doit 
etre optimisee pour faciliter son utilisation par vos personas. Cette 
maquette ergonomique a trois utilites principales : 

• Cote concepteur : la maquette vous force a prendre les problemes a 
bras le corps. Face a une problematique ecran, il vous faut absolu- 
ment trouver la solution d'interface qui representera le meilleur com- 
promis au vu de l'ensemble des contraintes. 

• Cote client : la maquette est un instrument de communication avec 
le client ; elle vous permet de faire valider la conception avant de 
passer au design graphique. Trop souvent, on attend d'avoir atteint 
un stade graphique avance pour s'apercevoir que, fonctionnellement, 
cela ne « marche pas ». II faut alors tout refaire et repenser, puis retra- 
vailler d'un point de vue graphique. 

• Cote equipe projet : la maquette est un document de travail ; c'est le 
livrable qui fait le lien entre le concepteur et le graphiste. Ce dernier 
va s'attacher a effectuer le travail de creation graphique en respectant 
le moule preconise par le concepteur. C'est aussi un livrable tres utile 
pour les integrateurs, puisqu'il contient des notes fonctionnelles sur 
le comportement de l'interface. On peut ainsi specifier les meca- 
nismes de communication avec la base de donnees, ce qui est admi- 
nistrable ou pas, dans quel ordre s'affichent les elements d'une liste, 
comment Ton choisit les mises en avant, etc. 



Methodologie 
Je ne suis pas fan du noir & blanc... 

Pensez bien a informer les personnes qui vont 
valider vos maquettes de la fonction que ces der- 
nieres remplissent. Precisez-leur que ce que vous 
allez leur soumettre n'a pas vocation a etre beau 
et sera plus ou moins en noir et blanc, mais n'a 
pas besoin d'aller plus loin pour atteindre son but. 
Indiquez-leur que c'est a partir de ce type de docu- 
ment que travaillera le designer pour concevoir 
I'allure finale du site. 
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Methodologie Combien de pages devez-vous maquetter ? 

Dans I'ideal, il faut maquetter autant de pages que possible d'un point de 
vue conceptuel. Dans la realite, prenez exemple sur la methodologie 
d'audit (chapitre 6 de ce livre) et specif iez d'abord les pages les plus impor- 
tantes (page d'accueil et sous pages d'accueil, page produit, page finale, 
pages correspondant aux rubriques de la navigation principale, etc.) 
II est plus important d'avoir passe en revue tous les types de pages, 
plutot que d'avoir decline de nombreuses pages relevant du meme 
modele en oubliant d'autres pages a I'organisation differente. 
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Les differents types de maquettes 



Remarque 

Utilite de la maquette conceptuelle 

en fonction du type de projet 

Dans certains projets cm les exigences sont tres 
fortes en termes d'image et de liberte laissee aux 
directeurs de creation ou aux directeurs artisti- 
ques, les phases de zoning et de maquettage con- 
ceptuel peuvent etre optionnelles. Le brief 
fonctionnel consiste alors en une liste textuelle des 
elements a faire figurer a I'ecran (et eventuelle- 
ment d'indications sur I'importance relative de 
chacun de ces elements). 



Une maquette peut etre realisee de maniere plus ou moins detaillee. Elle 
peut meme etre faite a la main et satisfait alors principalement des 
besoins cote concepteur : dessiner une maquette sur papier peut etre une 
pre-etape a la formalisation puis a la declinaison logicielle. C'est notam- 
ment tres interessant lorsque vous ne reussissez pas a trouver la solution 
d'interface a un probleme conceptuel. Travailler directement sur ordina- 
teur semble en effet presenter l'inconvenient de diriger la concentration 
mentale vers la realisation plutot que sur la generation d'idees. Autre- 
ment dit, pour un bon brainstorming, rien ne vaut le papier ! Vous adop- 
terez aussi ce format si vous manquez de temps : mieux vaut une 
maquette papier que rien. 

On parle souvent du niveau de detail d'une maquette en termes de fide- 
lite. Ainsi, une maquette papier ou une maquette ecran tres basique, en 
noir et blanc, et peu travaillee d'un point de vue visuel sera dite basse- 
fidelite. A l'inverse, une maquette qui commence a integrer des principes 
graphiques et atteint un fort niveau de detail est dite haute-fidelite. 

En fonction de son niveau de detail, la maquette conceptuelle represente 
plus ou moins de travail. Elle est de toutes facons toujours le lieu de nou- 
velles interrogations et demande a la fois de la rigueur et de l'imagination. 



Qu'est-ce que je mets dans ma maquette? 

Pour que la maquette conceptuelle atteigne son objectif, vous devez 
remplir les zones definies a l'etape de zoning. II s'agit ici de specifier pre- 
cisement ce que contient la page, a quel endroit sont places les elements, 
leur taille approximative, leur nom, leur comportement, etc. Vous for- 
malisez done la maniere dont se traduiront a I'ecran les principes gene- 
raux choisis precedemment. Pour chacun des objets, on doit aborder 
differentes dimensions. 

Textes et vocabulaire 

Au niveau des mots, vous devez bien distinguer la problematique des 
textes de celle du vocabulaire (e'est-a-dire plutot des intitules d'elements 
ponctuels). La question du texte nest souvent pas critique lors de la 
phase de maquettage. La pure activite de conception web ne consiste en 
effet qua recommander une longueur approximative et des grands prin- 
cipes de mise en forme. Dans l'ideal, vous devez done reserver l'ecriture 
des contenus a quelqu'un dont c'est le metier. C'est encore plus impor- 
tant pour les paragraphes cles, par exemple les quelques lignes de pre- 
sentation de votre site sur la page d'accueil. 
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Cependant, etant donne que ces contenus sont ecrits uniquement sur la 
base de vos conseils, vous n'en disposez pas au moment ou vous con- 
cevez vos ecrans. Vous pouvez utiliser du faux contenu, mais qui doit 
etre le plus realiste possible, a la fois au niveau du fond et de la forme. 
Par exemple, si vous maquettez une fiche produit, essayez de reprendre 
les descriptifs du site precedent ou des descriptifs de produits compara- 
bles sur un autre site. Au niveau de la forme, si vous utilisez du faux 
texte, ne dupliquez jamais le meme mot 50 fois pour representer un 
paragraphe. Utilisez plutot du contenu de type Lorem Ipsum, qui aura 
l'avantage de ressembler a du vrai texte et done d'etre beaucoup plus 
representatif de la forme finale du contenu. 

Passons au vocabulaire. Vous avez normalement decide, lors de la phase 
d'architecture de l'information, quel vocabulaire utiliser pour chacune de 
vos options de menu. Ici, votre reflexion portera done essentiellement 
sur le vocabulaire des elements en cceur de page, notamment les titres, 
libelles de boutons, de liens, legendes, libelles de champs de formulaires, 
etc. Chaque mot doit etre reflechi afin de correspondre au plus pres aux 
besoins de vos internautes (rappelez-vous la regie Comprehension que 
nous evoquions au chapitre 5, et croisez-la avec celles de Coherence, de 
Conventions, d'Assistance et de Gestion des erreurs). 

Votre travail ne consiste pas uniquement a definir le vocabulaire affecte a 
chaque objet. Par souci de rapidite et d'homogeneite du site, vous devez 
aussi rediger des regies d'ecriture (par exemple, vous recommanderez de 
libeller les boutons d'action avec un verbe a l'infinitif). 



OuilL Lorem Ipsum 



Si vous ne disposez pas de contenus reels ou rea- 
listes, vous pouvez aller chercher du contenu rem- 
plisseur sur ce site qui vous permet de generer du 
faux texte en fonction de vos besoins. Pensez a 
faire commencer votre texte par Lorem ipsum, afin 
que vos lecteurs saisissent immediatement qu'il 
s'agit d'un contenu de remplissage. 

Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit. 
Aenean rutrum. Nunc vel 
tellus. Integer id elit et odio 
vehicula vulputate. 



► www.lipsum.com 
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Apparence et comportement des objets 

Une maquette doit representer l'apparence des objets, mais aussi etre 
accompagnee de toutes les notes et representations visuelles necessaires 
concernant le comportement des objets. II s'agit de fournir autant 
d'informations de conception que possible aux personnes qui vont 
prendre en charge la realisation du site, e'est-a-dire d'abord les gra- 
phistes, puis les developpeurs. Vous devez appliquer ce principe sur les 
classes d'objets et sur les objets individuels. 

Apparence et comportement de classes d'objets 

Vous devez, d'une part, specifier comment se presentent et se compor- 
tent tous les types d'objets que Ton trouve sur votre site. Une specifica- 
tion suffit alors pour decliner l'ensemble des objets du meme type. Ce 
type de specifications, qui releve de la charte ergonomique, est donne de 
maniere generate pour tous les objets comparables, en introduction des 
maquettes detaillees de chaque page. Cela vous evitera de repeter les 
memes informations sur plusieurs pages. 



Charte ergonomique 



Une charte ergonomique specifie des regies de 
conception des elements d'un site ou d'un ensemble 
de sites. Elle permet ainsi de s'assurer que les 
regies ergonomiques elementaires sont respectees 
lors du developpement de nouvelles pages, fonc- 
tionnalites ou contenus. L'application d'une charte 
ergonomique permet en effet de se conformer aux 
basiques de I'ergonomie et de les integrer au fur et 
a mesure de la vie du site. La charte a done pour 
objectif d'aider les concepteurs, en leur fournissant 
les briques de base pour concevoir des pages de 
qualite : en utilisant cette charte, ils s'assurent que 
les fondamentaux d'ergonomie seront respectes. 
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Ainsi, vous allez specifier la maniere dont se presentent et se comportent 
tous les types d'objets de votre site, par exemple : titre de page, niveaux de 
texte, module de mise en avant, lien hypertexte (inter-pages et intra-page), 
titre cliquable, chapeau cliquable, bouton d'action, item d'une barre de 
navigation, image, message systeme, champ de formulaire, balise Alt, 
balise Title, etc. 

En ce qui concerne l'apparence des objets, la representation sous forme 
de maquette vous permettra de transmettre implicitement des recom- 
mandations sur l'emplacement de ces elements, la taille attendue, les 
couleurs ou au moins les rapports de contrastes fond/caractere, la maniere 
dont ils sont remplis, etc. 

Par exemple, sur un site contenant beaucoup de formulaires que vous ne 
pouvez pas tous specifier, vous donnez des regies de type : les libelles de 
champs sont allgnes a droite, ils ne sont pas suivis de : , etc. 

Quant aux specifications relatives au comportement des objets, elles ne 
concernent que les elements cliquables ou influences par le systeme (par 
exemple, la modification d'un symbole de disponibilite produit en fonc- 
tion de letat du stock). Toutefois, les objets d'interface qui necessitent le 
plus de specifications comportementales sont les elements cliquables. 
Dans ce cadre, quand on parle de comportement, c'est finalement tou- 
jours en termes d'apparence mais, de surcroit, temporaire. Ainsi, que se 
passe-t-il lorsque l'utilisateur interagit avec le site et survole un lien 
hypertexte ou clique dans un champ de formulaire ? 

Si on prend l'exemple des liens hypertextes, ces derniers ont generale- 
ment un etat nominal, un etat survole, un etat clique/active et un etat 
visite. Selon les sites, on peut ajouter d'autres attributs, par exemple 
recommander d'afficher un element supplemental au survol lorsque le 
lien est un lien externe. 



Figure 9-7 

Specification du survol d'un lien externe 

a destination de la bourse nationale 

de la transmission d'entreprises sur 

le site d'OSEO 

Source : www.oseo.fr 



L'acces aux fiches par un site externe doit etre 
clarifie. Les internautes ne s'attendent pas a ouvrir 
cette fiche dans un site partenaire. L'internaute 
est ici informe qu'il s'agit d'un lien externe et qu'il 
s'ouvrira dans une nouvelle fenetre par Fapparition 
d'une icone au survol de la souris : 



COIFFURE MIXTE 



Fiche complete sur www.fusacq.fr 



Ce comportement s'applique au titre de l'annonce 
mais aussi au logo du partenaire. 
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Si on prend l'exemple des items d'un menu de navigation, ces derniers 
ont generalement un etat nominal (tant que l'utilisateur n'a rien fait) et 
un etat clique/active (lorsque Ton se trouve dans la rubrique correspon- 
dante). lis peuvent aussi avoir un etat survole. II peut suffire d'indiquer 
cette contrainte textuellement, sans forcement la representer graphique- 
ment. En fait, la maquette conceptuelle et ses annotations servent a 
donner des regies, des directions, et non des specifications graphiques. 
Par exemple, vous pourrez indiquer que : « Le lien survole doit avoir un 
aspect plus actif, comme reveille. II est done interdit d'utiliser un con- 
traste de couleurs moindre que le lien en etat nominal. » 

Faites attention a ne rien oublier, surtout lorsque vous sortez des sentiers 
battus. Ainsi, il est rare que les images aient un etat visite, mais cela peut 
avoir son importance dans certains types de navigation et il est alors pri- 
mordial de l'indiquer dans le document de specifications conceptuelles. 

C'est par exemple le cas sur le site de Jenna de Rosnay ou la navigation a 
l'interieur d'une gamme de maillots de bains se fait exclusivement via 
des images des modeles (ces derniers n'ayant pas de nom). II est alors 
important d'avoir prevu un etat visite pour ces images, facilitant la con- 
sultation multi-modeles. 



i 

a. 




Figure 9-8 

L'etat visite de trois modeles parmi les 1 de la 
page m'indique de maniere fiable et rapide 
que j'ai deja visualise le detail de ces modeles. 
Source : www.jennaderosnay.com 



Apparence et comportement d elements individuels 

Si certains elements n'apparaissent qu'une fois dans le site, ou s'ils repre- 
sented une instanciation particuliere d'une classe d'objets, vous devez 
indiquer dans la maquette conceptuelle leur apparence et leur comporte- 
ment, de la meme maniere que pour les types d'objets ; simplement, 
cette specification ne sera utilisee qua une seule occasion. 
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Par exemple, si vous estimez important d'agrandir la surface cliquable 
autour du contour strict du logo, la maquette conceptuelle est le lieu par- 
fait pour le specifier. 

Autre exemple : imaginons que vous avez prevu de modifier l'etat d'un 
bouton suite a une action utilisateur, puis de le ramener a son etat initial. 
Vous devez d'abord specifier les apparences et libelles de chacun des 
etats en fonction des enchainements prevus lors du flux d'interaction. 
Vous devez aussi fournir les durees d'affichage de ces etats. Si vous n'etes 
pas en mesure d'etre assez precis et qu'il vous faut une interface fonc- 
tionnelle pour juger de cette duree, vous devez l'indiquer afin que ce ne 
soit pas oublie par la suite. Ainsi, pour atteindre l'interface finale du pro- 
cessus d'ajout au panier dans le site Reservoir Jeux, il a fallu specifier 
l'ensemble des etapes suivantes : 



© 



Vatre panier ne contient aucun article 



18,99 € 



Disponible 

Delai de livraison : 

A propos de le livra 


48 h 
is on 




ik+^B ^^loA^AXiU^u 




fcMHBHH«m=lUU.U.B 


Voir votre se 


action 


d' articles 





Les intern a utes qui cut achete ce 
prcduit cut aussi achete : 

Jungle Speed 

18,49 € 

Lejeu poilant qui vous 
permettra de ... 




Votre panier ne contient aucun article 



Figure 9-9 

Le processus d'ajout au panier du site de 

Reservoir Jeux se decompose en 5 etapes : 

1 - interface initiale : on clique sur le bouton 

Ajouter au panier, 2 - ajout en cours, 

3 - article ajoute, 4 - fondu, 5 - retour 

au bouton Ajouter au panier. Au cours 

de la seconde etape, on voit apparaitre 

I'article dans un resume du panier 

sur la droite de I'ecran. 

Source : www.reservoir-jeux.com 



18,99 C 

Disponible 

Delai de livraison : 4S h 

A prop os de la livraison 



yLUUiteJ 

Voir votre selection d'article 



18,99 € 

Disponible 

Delai de livraison : 4S h 
A propos de la livraison 



Les internautes qui cut achete ce 
prcduit cut aussi achete : 

Jungle Speed 
18,99 € 

Le jeu poilant qui vous 
permettra de ... 




Votre panier contient 1 article 
<f Masquer + + 

Article Qte Prix 

Time's Up ■ «dit»n 1 l8gg £ m 

HHK 

Total : 15,99 € 



Voir votre selection d'a^.-:^- 



Posser votre commands 



Vdus paurrez encore modifier 

les articles de votre commande et 

les options de livraison. 
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18,99 € 

Disponible 

Delai de livraison : 43 h 

A propos de la livraison 



(^^^^J 



Votre panier contient L article 
<f Masquer 



Time's Up ■ edition L Lg g9 £ ^ 

bleue 



Voir votre selection d'article 



Total: 18,99 € 



Passer votre commande 



Vous pourrez encore modifier 

les articles de votre commande et 

les options de livraison. 



I 



18,99 € 

Disponible 

Delai de livraison : 43 h 
A dtodos de la livraison 






^mmimmm 


Voir votre selection d'articles 





Votre panie 


contient I articl 


'f Masaue 






Article 




Qts 


Time's Up 
bleue 


edition 


I 



: r, 
L8 r 99 € m 
Total: 18 r 99€ 



Possex votre commande 



Vous pourrez encore modifier 

les articles de votre commande et 

les options de livraison. 



Figure 9-9 (suite) 



De la meme maniere, si votre site contient des formulaires qui se com- 
portent de maniere dynamique, vous devez representer tous les types 
d'etapes possibles en fonction des actions utilisateur. Regardez ainsi cet 
exemple de specification textuelle accompagnee d'une representation 
visuelle pour le site d'OSEO : 





Dans la recherche avancee, les Us res deroulantes 
successivcs pour prcciscr I'activite s'affichcnt une a 
une, progressivement, si l'internaute a renseigne le 
niveau superieur. 

Ces modifications se font sans rechargement de la 
page globalc, scion lc processus suivant : 

1 . L/inrcrnautc clique sur le radio button 
"Alimentaire de detail" > On affiche la liste 
deroulante "Precisez 1'activite" (s'il a deja 
renseigne Alimentaire de detail dans la recherche 
simple, il arrive avec cette Ustc deroulante affichec 
par defaur) 

2. L'internaute clique sur 1'item "Boulangerie 
patisserie" > On affiche la liste deroulante 
"Affiner encore", en precisant que cette 
information esr optionneUe : 




Selectionnez un lype dactivlte : 
(~~ Alimentaire de detail 




Boulangerie patisserie v 
Affirer encore (oplionnel) (jiT 
Librairie. tabac. lolsirs 
Coiffure, parfumerie, esltietique 









Figure 9-10 

Specification de comportement : formulaire de 
recherche de la bourse nationale pour la transmis- 
sion d'entreprises sur le site d'OSEO. 
www.oseo.fr 
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Dernier exemple : si des objets de votre site changent d'apparence et de 
comportement en fonction des actions passees de l'internaute (c'est 
notamment le cas des liens visites), vous devez le specifier afin de ne pas 
l'oublier. Void une remarque de ce type, toujours dans les specifications 
conceptuelles du site d'OSEO : 



Figure 9-11 

Specification des icones 

pour la bourse nationale 

de la transmission d'entreprises 

sur le site d'OSEO. 

www.oseo.fr 





Etat d'enregistrement 

.orsqu'unc annoncc est enrcglstrce, l'iconc 
d'enregistrement n'est plus utilisable. Elle prend 
une apparence "inactive". L'internaute a done ainsi 

'information permanente que cette offre est deja 
cnrcgistrcc. 




iiB 











Ces differents exemples ont pour objectif de souligner un point : plus vous 
specifierez d'elements dans vos maquettes, moins vous aurez de travail de 
retouche et d'allers-retours par la suite. Essayez done d'approfondir au 
maximum le detail de l'apparence et du comportement de l'interface. 

La maquette conceptuelle par I' exemple 

Le premier exemple de maquette reprend celui de notre premier zoning 
et concerne la page d'accueil du site Formation des editions Lamy : 



Figure 9-12 

Maquette conceptuelle de la page d'accueil du 

site Lamy Formation (groupeWolters Kluwer). 

Source : specifications ergonomiques pour la 

refonte du site www.lamy.fr/modules/formations 
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Le second exemple illustre le contenu d'une page interne du meme site 
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Figure 9-13 

Maquette conceptuelle d'une fiche produit du 
site Lamy Formation (groupeWolters Kluwer). 
Source : specifications ergonomiques pour la 
refonte du site www.lamy.fr/modules/formations 



Vous serez aide dans votre tache par les nombreux logiciels existant sur 
le marche pour realiser des maquettes conceptuelles. 

Quels logiciels pour realiser zonings 
et maquettes ? 

II se trouve que les logiciels utilises par les differents concepteurs relevent 
souvent davantage d'un choix d'entreprise que d'un choix individuel 
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guide par l'analyse fine des avantages et inconvenients de chacun des 
outils. Notez aussi que c'est rarement l'outil qui determine la qualite des 
specifications, mais bien plutot l'expertise, l'ardeur et la rigueur que Ton 
met a cette tache. 

Tableau 9-2 Les logiciels pour realiser plans de site, flux d'interaction, zonings et maquettes 



Logiciel 


Avantages 


Inconvenients 


Powerpoint (Microsoft Office) 
http://www.microsoft.com/france/office 


- partage et travail collaboratif inter-entreprises ; 

- support du prototypage pour les tests utilisateurs ; 

- avantages d'un logiciel oriente presentation (gestion des 
masques, des styles, de la pagination) ; 

- caractere multi-fonctions. 


- rigidite dans la mise en page ; 

- inadaptation au format web ; 

- pas de prise en compte de la notion 
de pixels. 


Visio (Microsoft Office) 
http://www.microsoft.com/france/office 


- bibliotheques d'elements ; 

- caractere multi-fonctions ; 

- tres efficace pour la representation d'architectures et de 
flux d'interaction. 


- difficulty de partage des documents 
et de travail collaboratif inter- 
entreprises ; 

- pas de prise en compte de la notion 
de pixels ; 

- rigidite dans la mise en page. 


InDesign (Adobe) 
http://www.adobe.fr/indesign 


- modes d'interaction qui permettent de travailler tres vite ; 

- puissance et flexibility du mode vectoriel ; 

- avantages d'un logiciel de mise en page (gestion des 
masques, des styles, de la pagination, exports pdf, gestion 
avancee de I'impression) ; 

- bibliotheques d'elements ; 

- caractere multi-fonctions (permet a la fois de dessiner des 
plans de sites, des zonings, des maquettes, d'ecrire des rap- 
ports d'audit ou de tests utilisateurs, etc.) ; 

- support du prototypage pour les tests utilisateurs. 


- pas de prise en compte de la notion 
de pixels ; 

- difficulty de partage des documents 
et de travail collaboratif inter-entre- 
prises. 


Illustrator (Adobe) 
http://www.adobe.fr/illustrator 


- notion de pixels ; 

- puissance et flexibility du mode vectoriel ; 

- bibliotheques d'elements. 


- pas de notion de pages ; 

- difficulty de partage des documents 
et de travail collaboratif inter-entre- 
prises. 


Photoshop (Adobe) 
http://www.adobe.fr/photoshop 


- notion de pixels ; 

- precision apportee par la finalite initiale de l'outil ; 

- support du prototypage pour les tests utilisateurs. 


- vitesse d'execution ralentie par la 
possibility de dessiner au pixel pres 
(le concepteur a tendance a trop 
exploiter les possibility de l'outil et a 
aller trop loin dans le detail) ; 

- pas de notion de pages. 


Axure RP Pro 

http://www.axure.com 


- le plus avance pour travailler en integrant des elements 
reellement fonctionnels (par exemple les listes deroulan- 
tes), notamment en vue d'un prototypage ; 

- bibliotheques d'elements. 


- difficulty de travail collaboratif 
inter-entreprises. 
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Outils Gare aux pixels ! 

II est important de prendre en compte la notion de pixels lorsque vous 
dessinez des zonings ou des maquettes. Or c'est trop rarement le cas 
dans les habitudes de conception web a la francaise. Lorsqu'on a la 
chance d'avoir une personne consacree uniquement a la conception du 
site, et non a son aspect graphique, celle-ci travaille souvent de maniere 
completement decorrelee du format final d'un site web. 
Pourtant, un ecran, c'est une somme de pixels. Certes, les outils qui 
n'integrent pas la notion de pixels permettent tout de meme d'avoir 
une idee des proportions de chacun des elements en regard des autres. 
Cependant, il vous faudra toujours savoir si « ca rentre ou pas ? ». Ce 
sont des problematiques recurrentes pour les barres de navigation hori- 
zontales, les fils d'Ariane, la largeur d'une page decoupee en 3 
colonnes, les contenus visibles au-dessus du fold, etc. 
En outre, comme nous I'avons evoque au debut de ce chapitre, une 
page web est infinie en longueur. II se trouve que les logiciels rigides en 
termes de format de page (notamment ceux ne proposant que du A4 en 
portrait ou en paysage) donnent des sites dont on repere tres vite qu'ils 
ont ete concus avec ce type d'outils. Meme si ce n'est pas dramatique, et 
que I'on trouve des moyens de contournement lorsqu'on le souhaite 
vraiment (par exemple, on represente un ecran sur plusieurs pages), il 
est dommage que I'outil influence autant la conception. 



Et la suite ? 

Une part non negligeable de l'activite de conception consiste a faire ce que 
Ton appelle de la validation ou du suivi ergonomique. Parce que Ton ne 
peut jamais tout specifier, et aussi qu'il est possible d'etre mal compris, 
vous devez necessairement effectuer des sessions de validation suite a la 
prise en compte des specifications conceptuelles. Faites-le au moins apres 
l'etape de design graphique et apres celle d'integration technique. Si vous 
le pouvez, faites-le encore plus souvent, meme de maniere informelle. 

Ce type de validation permet de verifier que Ton respecte non seulement 
les specifications contenues dans vos documents, mais aussi les regies 
ergonomiques generales (voir a ce propos le chapitre 5). Et, lorsque vous 
avez mis tout votre cerveau de specialiste dans 1'optimisation ergono- 
mique de votre site, il ne vous reste plus qua evaluer sa pertinence avec 
de vrais internautes ! C'est l'objet des deux derniers chapitres de ce livre. 



i 

a. 
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Figure 9-14 

Puisque la maquette conceptuelle sert a diriger 

le travail de design et celui d'integration, 

il est important de valider ces deux etapes d'un point 

de vue ergonomique. Cette activite peu couteuse 

vous assurera d'une bonne qualite d'utilisation 

finale, grace a revaluation du respect de la 

maquette conceptuelle, mais aussi en allant au-dela. 

Source : Specifications ergonomiques et maquette 

graphique de la page d'accueil du site www.lamy.fr 

(groupe Wolters Kluwer) 
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ClNQUIEME PARTIE 



Mettez votre site 
a I'epreuve 



S'il y a une chose que ce livre doit vous avoir apprise, c'est que vous n'etes pas 
representatif de vos utilisateurs. Cela signifie done que, si vous voulez 
ameliorer au maximum l'ergonomie de votre site, vous devez le soumettre a 
I'epreuve de balles reelles. 

Autrement dit, il faut que vous observiez ce que donne votre site face a de 
vrais internautes. Les methodes du tri de cartes et du test utilisateur vous y 
aideront. 



chapitre 
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La methode du tri de cartes 
pour organiser un site 



Lorsque Ton travaille sur l'organisation d'un site web, on essaie 
de le structurer de maniere optimale pour ses utilisateurs 
finaux. Ces derniers ont en tete des attentes et des manieres 
de categoriser les informations qu'il vous faut comprendre. 

Ce n'est qu'en essayant de cerner leur facon de penser 
et comment ils voient les choses que vous pourrez organiser 
votre site pour eux. Voyons comment la methode du tri 
de cartes peut vous y aider. 



SOMMAIRE 

► Preparation du tri de cartes 

► Deroulement d'un tri de cartes 

► Les grands types de tris de 
cartes 

► L'analyse des donnees 

► Utilite et limites du tri de cartes 

MOTS-CLES 

► Tri de cartes 

► Architecture de I'information 

► Categorisation mentale 
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METHODOLOGIE Et si je saute cette etape ? 

Si votre architecture de I'information se base uni- 
quement sur votre regard de concepteur, elle 
risque d'etre inadaptee aux pre-conceptions de 
vos internautes. Encore une fois, rappelez-vous 
que vous n'etes pas I'utilisateur final et que per- 
sonne ne peut s'y substituer. 



Dans ce livre Tri de cartes 
et architecture de I'information 

La methode du tri de cartes est intrinsequement Nee 
a I'architecture de I'information. Pensez a faire un 
tour au chapitre 8 afin d'en savoir plus sur I'applica- 
tion de cette discipline au domaine du Web. 



METHODOLOGIE La place du tri de cartes 
dans le cycle de conception 

Rappelez-vous le caractere amont de I'architecture 
de I'information par rapport au maquettage des 
ecrans. Le tri de cartes vous servira a nourrir ou 
valider votre architecture de I'information pour 
supporter le reste des etapes de conception. 
Notez que le tri de cartes est aussi une tres bonne 
methode devaluation lorsque vous devez juger de la 
pertinence utilisateur d'une architecture existante. 



Une des methodes privilegiees en architecture de I'information est le tri 
de cartes, ou tri par cartes. Cette demarche participative consiste a faire 
ranger des contenus a des internautes afin de comprendre la maniere 
dont ils operent des regroupements categoriels. Classiquement, on pro- 
pose un tas de « cartes » (les contenus du site) a des utilisateurs qui doi- 
vent former plusieurs piles a partir de ce tas unique. 

La methode du tri de cartes est une sorte d'exercice sous forme de jeu, 
dont le but est d'aller chercher les modeles mentaux a la source, c'est-a- 
dire dans la tete des gens. Le resultat du tri de cartes doit normalement 
refleter la maniere dont ils rangent les informations dans leur tete. 

Cette methode permet done de valider les bases d'une structure web 
avant de passer a sa formalisation sous forme d'ecrans. Elle est ideale 
pour travailler sur deux plans : a la fois l'organisation des informations a 
l'interieur d'un site et les noms que Ton donne a ces informations. 

En effet, ces mots etant les seuls indices permettant aux internautes de 
naviguer parmi les rubriques, ils reverent une importance primordiale. 
Autrement dit, vous pouvez tout a fait avoir une bonne categorisation, 
mais la saccager parce que vous n'avez pas trouve des noms de rubriques 
appropries. Cela revient a avoir une mauvaise categorisation, puisque vos 
internautes seront tout autant incapables de parcourir le site efficacement. 

Le tri de cartes peut vous servir de methode aussi bien pour revaluation 
que pour la validation de vos propres specifications. Vous pouvez done 
l'utiliser pour evaluer la qualite de I'architecture de I'information au sein 
d'un site existant ou pour valider vos choix lors d'une conception de site. 
Autrement dit, e'est une methode qui vit dans un projet aussi bien tres 
en amont que lorsque le site existe deja. 

Nous allons commencer par aborder la preparation et le deroulement 
d'un tri de cartes classique, e'est-a-dire le plus frequemment utilise, pour 
ensuite presenter les applications derivees de cette methode de base. 



La preparation du tri de cartes 

L etape de preparation du tri est assez simple. Vous n'avez besoin que de 
cartes et de participants. 



Pre-REQUIS On trie ce qu'on a enumere 

Cette presentation du support du tri de cartes sup- 
pose que vous ayez conduit prealablement un tra- 
vail d'enumeration des contenus (voir a ce propos 
le chapitre 7). 



Le materiel du tri de cartes 

Pour mener un tri, vous devez avoir enumere l'ensemble des contenus 
que vous souhaitez soumettre a vos participants. Ensuite, il vous faut 
preparer le support sur lequel vous allez presenter ces contenus. 
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Le support du tri est tres simple : si vous menez un tri de cartes papier, il 
consistera a imprimer ou a noter le nom de chaque contenu sur ce que 
Ton appelle une carte ; celle-ci peut etre du papier, du carton, des post- 
it, etc. Vous pouvez utiliser les memes cartes pour tous les participants. 
Elles resisteront alors mieux si elles sont en carton. Vous pouvez aussi 
realiser le tri sur une surface verticale (mur ou tableau), en utilisant des 
supports autocollants ou des aimants. Si vous adoptez une version infor- 
matique du tri de cartes, cette preparation consistera a saisir les noms de 
chacune de vos cartes dans votre application. 

Le plus souvent, ce que Ton note sur une carte, c'est une description tex- 
tuelle du contenu. Cependant, il peut etre interessant de contextualiser le 
concept a l'aide d'une illustration du contenu en question (figure 10-2). 
Cela vous permettra de ne pas le decrire trap precisement et de laisser l'uti- 
lisateur se l'approprier. 
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METHODOLOGIE Attention aux biais 

Veillez a ne pas orienter le tri par la maniere dont 
vous nommez les cartes (par exemple, information 
commerciale, information client, information tech- 
nique, etc.). Ce sont les elements discriminants de 
chacune des cartes/concepts qui doivent etre tra- 
duitssur la carte. 



Figure 10-1 

Exemple de support de tri de cartes pour le site 
d'Asmodee : les descriptifs des cartes sont 
uniquement textuels. 
Source : www.asmodee.com 



Preparez aussi de quoi noter ce qui se passe pendant le tri, ainsi que les 
verbalisations de vos participants. Vous pouvez filmer les sessions de tri 
si vous avez le temps de toutes les visionner par la suite, mais cela pre- 
sente peu d'interet. Essayez d'analyser en temps reel et d'extraire ce qui 
vous semble interessant a mesure que la session se deroule. 



363 



Figure 10-2 

Exemple de support de tri de cartes pour le site 

de la Camif : les descriptifs des cartes sont 

constitues d'un mot generique et d'une photo 

correspondante, issue du catalogue. 

Source : www.camif.fr 




Dans le cas d'un tri de cartes physique, n'oubliez pas qu'il vous faudra 
aussi un appareil photo pour capturer le resultat du tri de cartes. 

Les participants au tri de cartes 

Le fondement de la methode du tri de cartes est de faire appel a de vrais 
utilisateurs, vous devez done en recruter quelques-uns pour les faire tra- 
vailler et s'exprimer sur vos contenus. 

Les conseils de recrutement sont identiques a ceux du test utilisateur. 
Reportez-vous done au chapitre suivant pour les lire en detail. Dans les 
grandes lignes, les utilisateurs dont vous recueillez les donnees doivent 
posseder un profil identique a celui des internautes qui viennent sur 
votre site. La seule difference avec le test reside dans l'importance plus 
elevee du nombre de participants, notamment si vous souhaitez analyser 
les donnees sous forme statistique. Pour pouvoir realiser ces statistiques 
et garantir la plus grande fiabilite possible, vous avez besoin d'autant de 
participants que possible. Toutefois, si vous n'avez pas beaucoup de 
temps et souhaitez coupler les methodes du tri de cartes et du test utili- 
sateur en ne faisant venir vos participants qu'une fois, vous devrez vous 
contenter du meme nombre de personnes dans votre panel. 



Deroulement d'un tri de cartes : 
les regies du jeu 

Detaillons d'abord le deroulement d'un tri de cartes tel qu'il se pratique 
le plus frequemment. Nous presenterons par la suite les differents types 
de tris de cartes et les impacts qu'ils ont sur ce deroulement de base. 
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l re etape : Immersion 

Un tri de cartes commence par la presentation d'un ensemble de cartes 
representant les contenus, services et fonctionnalites que vous souhaitez 
voir apparaitre dans votre site web. Attention, le tri de cartes ne con- 
cerne pas forcement la totalite du site et peut etre centre sur une proble- 
matique particuliere (par exemple, la categorisation du catalogue 
produits en differentes rubriques). 




E 

J3 
i 

o 



Figure 10-3 

Support de I'etape d'immersion : les cartes a 
trier, ainsi qu'un paquet de cartes vierges. 



Lors de cette premiere etape, on explique les regies du jeu du tri de facon 
concrete. Le support physique de l'explication est une table sur laquelle 
on aura dispose les cartes de facon aleatoire, ainsi qu'un petit tas de 
cartes vierges, non libellees. 

Selon les preferences, on pourra presenter les cartes libellees sous forme 
de tas ou reparties sur la table. L'eparpillement des cartes sur la table 
presente l'avantage de donner a votre participant une vue d'ensemble du 
type de contenus que vous lui demandez de ranger. Cela lui evite done 
de changer de strategic de groupement et de perdre du temps. Notez 
cependant que, si vous avez un nombre important de cartes, il semble 
plus indique de proposer un tas de cartes plutot qu'un etalage. En effet, 
cela permet au participant de fonctionner de maniere sequentielle et de 
bien se concentrer sur le principe au lieu de s'eparpiller dans l'analyse de 
toutes les cartes posees sur la table. 




Figure 10-4 

Deux possibility de presentation des cartes a 
trier : etalees sur la table ou sous forme d'une 
pile. 
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2 e etape : Validation et precision des contenus 

Cette seconde etape est optionnelle. Elle consiste a faire valider les con- 
tenus par le participant. Elle est primordiale lorsque Ton considere que 
l'utilisateur detient un savoir donne ou une attente en termes de contenu 
et que Ton souhaite y acceder. Bien entendu, les internautes ont toujours 
de telles attentes, mais les caracteristiques d'un projet peuvent interdire 
toute remise en question des contenus et de leurs caracteristiques. Le tri 
consiste alors uniquement a organiser des contenus determines a priori. 

Vos participants doivent vous aider a juger de la pertinence des cartes sur 
deux plans : leur utilite et leur appellation. 

• Au niveau de l'utilite des contenus, il s'agit a la fois de detecter si les 
cartes presentees paraissent coherentes a l'utilisateur (Est-ce qu'il est 
utile d'avoir ce type d'informations sur le site ?), et s'il lui semble 
manquer des choses. On doit lui suggerer d'ajouter les contenus 
manquants en se servant des cartes vierges. 

• Au niveau de l'appellation des contenus, on doit demander a l'utili- 
sateur d'analyser les intitules et d'en proposer de plus adaptes si 
necessaire. L'utilisateur peut done renommer les cartes a sa guise s'il 
estime que les contenus sont mal decrits. 



Figure 10-5 

Resultat de I'etape de validation et de preci- 
sion des contenus a trier. 




Avant de passer a I'etape suivante, vous pouvez demander a votre parti- 
cipant de decrire chacun des contenus. Cette etape est un support intel- 
lectuel interessant pour l'activite de categorisation. Les similitudes et 
differences entre contenus apparaissent ainsi de maniere plus marquee. 

Par exemple, la phase de categorisation des produits du catalogue d'un 
editeur de jeux peut etre precedee d'une verbalisation provoquee sur la 
nature de chacun des jeux. Ainsi, il peut etre interessant de poser a vos 
participants des questions du type « Si vous deviez decrire cejeu en quelques 
mots a un ami, que lui diriez-vous ? ». Vous obtiendrez alors des mots-cles 
descriptifs qui aideront vos participants lors de I'etape suivante. 
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3 e etape : Groupement 

L'etape centrale d'une session de tri consiste a demander au participant 
de degager des groupes a partir de l'ensemble des cartes. II doit etablir 
des regroupements de cartes en associant ce qui lui parait aller ensemble 
(les items comparables), et done en separant ce qui lui parait different 
(les items opposables). Le tri peut ainsi etre effectue selon un double 
mouvement et vous verrez que tous les participants n'adoptent pas la 
meme strategic : certains prennent le parti de regrouper, d'autres celui de 
diviser. Dans tous les cas, tous doivent arriver a un resultat identique : 
quelques groupes de cartes. 



Methodologie 
Restriction du nombre de groupes 

Si e'est important pour votre projet, vous pouvez 
poser une limite a vos participants en leur indi- 
quant un nombre maximal de groupes. 
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Figure 10-6 

Resultat de l'etape de groupement. 



Au gre de la session de tri, et en fonction de la position methodologique 
que Ton aura adoptee, on peut inviter l'utilisateur a dupliquer certaines 
cartes si elles lui paraissent appartenir a plusieurs groupes. II faut done 
decider avant la session de tri si les categories doivent necessairement 
etre impermeables (e'est-a-dire qu'un item appartient a une et une seule 
categorie). C'est un choix theorique important. Dans le domaine du 
Web, on accepte souvent la presence inter- categories d'un item, puisque 
la categorisation ne doit pas limiter les liens transversaux entre contenus. 

C'est vraiment cette etape de groupement qui permet d'acceder au pro- 
cessus mental de classement des utilisateurs. II s'agit d'essayer de trans- 
ferer une categorisation mentale sur le plan concret. 

En tant qu'etres humains, nous avons tendance a analyser le monde qui 
nous entoure sous la forme de categories, afin de le simplifier. Ainsi, 
nous assimilons par reflexe ce qui se ressemble et separons ce qui se dif- 
ferencie. Le tri de cartes a pour objectif de reperer les items qui vont etre 
consideres comme comparables par les internautes. Ces regroupements 
ne tombent pas toujours sous le sens et dependent beaucoup des con- 
naissances anterieures et des habitudes des internautes. On ne regroupe 
pas seulement des choses parce qu' elles partagent des traits communs 
parfaitement identifiables. Le concept de ressemblance cognitive est 
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beaucoup plus complexe et fait intervenir un reseau elabore de relations 
de similitudes et de differences qui s'entrecroisent. 

II existe dans nos structures conceptuelles de nombreuses categories 
dont les membres, pris deux a deux, peuvent ne partager aucun facteur 
commun. Le philosophe Wittgenstein a explique cet etat de fait par la 
notion d'« air de famille » : parfois, sans pouvoir expliquer pourquoi, on 
met en correlation deux objets du monde parce qu'ils nous semblent 
avoir quelque chose en commun, que Ton ne parvient pas a determiner 
exactement. Les membres d'un meme groupe peuvent tous avoir un « air 
de famille » sans que Ton puisse pour autant en identifier la cause. 

C'est par exemple le cas des jeux : un jeu peut n' avoir rien de commun 
avec un autre jeu, mais nous sommes tout de meme capables de deter- 
miner qu'il s'agit d'un jeu. En fait, les correspondances conceptuelles 
s'etablissent plutot deux a deux (par exemple, on voit bien que les jeux de 
dames et d'echecs ont des points communs) et c'est la somme des rela- 
tions d'objets deux a deux qui cree une categoric 

4 e etape : Norn mage 

La derniere etape consiste a demander a l'utilisateur d'essayer de 
nommer les groupes qu'il a formes. Vous devez insister sur le fait que 
cette appellation ne requiert pas necessairement clarte ou concision. 



Figure 10-7 

Resultat de I'etape de nommage. 




Pour faciliter le cheminement mental vers 1' attribution d'un nom a une 
categorie, on peut faire preceder cette etape d'une preparation. II s'agit de 
determiner sur quoi est base le tri en demandant au participant : 
« Pourquoi avez-vous mis ces cartes [designation d'un groupe] ensemble ? 
Quest-ce qui fait qu'elles se ressemblent ? Qu'est-ce qui les differencie des autres 
cartes ? » 

La reflexion pour repondre a cette question sert de support a I'etape suivante 
d'attribution d'un nom au groupe. La recherche d'une appellation est en 
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effet guidee par la reflexion sur les fondements du classement. On doit done 
demander a l'utilisateur d'extraire le denominateur commun a l'ensemble 
des cartes composant la categoric C'est, normalement, cet attribut qui lui 
aura permis de decider que l'information A etait comparable a 1'information 
B. Vous verrez que, la plupart du temps, les participants s'expriment d'eux- 
meme sans que vous ayez besoin de leur donner cette consigne. 

Cette procedure permet d'obtenir un intitule descriptif de chacun des 
groupes de contenus. Attention, cette etape sert surtout a comprendre 
pour quelle raison les cartes d'un groupe ont ete classees ensemble. Les 
titres que donnent vos participants aux groupes ne constituent done pas 
forcement le nom que vous attribuerez aux rubriques de votre site. 
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Accompagner vos participants 

II est important de rappeler aux participants que Ton ne cherche pas a tester 
s'ils voient les choses telles qu'on le souhaiterait, mais que Ton cherche bien 
a comprendre leur verite, qui est la seule chose qui nous interesse. 

En outre, vous devez demander a vos participants de vous expliquer ce qui 
se passe dans leur tete pendant toute la session de tri, comme lors d'un test 
utilisateur. lis doivent essayer de penser a voix haute, afin que vous puis- 
siez acceder au maximum de donnees sur leur organisation mentale. 

Les quatre etapes que Ton vient d'evoquer constituent le deroulement 
classique d'un tri de cartes. Toutefois, cette methode est multi-forme et 
peut etre appliquee de maniere tres differente selon les positions metho- 
dologiques adoptees. Dans la suite de ce chapitre, nous allons done nous 
interesser aux differents types de tris de cartes. 



Methodologie Le tri de cartes s'interesse 

aux representations mentales 

d'un utilisateur 

Si vous entendez des choses du type « C'est $a, 
hein ? », « J'ai bon, la ? », « Je le mettrais 
bien avec <;a, mais je pense pas que les 
autres vont faire qa », « J'imagine que qa 
doit etre fa qu'on attend de moi », etc., 
insistez a nouveau sur le fait qu'il n'y a pas de 
bonne ou de mauvaise reponse, mais que Ton 
cherche a comprendre la maniere dont /7s voient 
les choses. 



Les grands types de tris de cartes 

On peut mettre en ceuvre la methodologie du tri de cartes de maniere 
differente en fonction de 4 dimensions : la liberte d'action de vos partici- 
pants, le support materiel du tri, les caracteristiques de votre panel et le 
niveau de profondeur du tri. 

Selon la liberte d'action des participants 

Le tri peut etre ouvert (vous ne proposez pas de groupes a priori) ou 
ferme (les cartes doivent etre rangees dans des groupes predefinis). 
Ainsi, le cadre de travail que vous proposez a vos participants est plus ou 
moins structure, et leur laisse plus ou moins de liberte d'action. Choisir 
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entre un tri de cartes ouvert ou un tri ferme ne releve pas du hasard : 
chacune de ces methodes possede ses contextes d'utilisation privilegies. 

Tri de cartes ouvert : tout est possible 

Le tri de cartes ouvert est le plus couramment utilise. II est dit ouvert car il 
laisse une grande liberte a l'utilisateur dans son activite de classement des 
contenus. II consiste a presenter au participant un paquet de cartes corres- 
pondant aux contenus du site et a lui demander d'en constituer des groupes. 

Le nombre de groupes ainsi que leur appellation sont en general totale- 
ment libres : c'est l'utilisateur qui decide. Vous pouvez toutefois con- 
duire un tri partiellement ouvert en limitant le nombre de groupes a un 
plafond maximal (vous indiquez par exemple a vos participants qu'ils ne 
peuvent pas creer plus de 12 groupes). 

Le tri de cartes ouvert est plutot utilise lors des phases de conception de 
l'architecture de l'information. Les resultats des tris ouverts sont des 
sources d'informations tres riches pour construire un rubriquage perti- 
nent, lis permettent en effet d'acceder aux representations mentales de 
l'organisation et de l'interaction entre les contenus proposes. Cette 
methode sert souvent de base pour une premiere proposition d'architec- 
ture sous forme de plan de site. 

C'est done plutot une methode de decouverte, durant laquelle vous allez 
chercher l'information a la source, dans la tete de vos internautes. Vous 
vous interesserez aussi aux mots qu'ils mettent sur les elements que vous 
leur proposez. 

Tri de cartes ferme : une place pour chaque chose et chaque 
chose a sa place 

Le tri de cartes ferme se base quant a lui sur des categories deja fixees 
par l'equipe de conception et/ou le client. II consiste a demander a l'uti- 
lisateur de classer une serie de cartes dans des categories predefinies. En 
fonction du niveau de fermeture, vous pouvez laisser vos participants 
placer, si necessaire, une carte dans plusieurs categories (en dupliquant la 
carte) ou renommer les cartes et les intitules des categories. 

Ainsi, le tri de cartes ferme se positionne plutot comme une methode de 
validation d'une architecture deja pensee. II s'agit de la tester avec l'aide 
de vos internautes et d'obtenir un feedback sur l'efficacite des intitules 
que vous avez choisis. 

Proposer un tri ouvert ou ferme a des consequences sur le deroulement 
classique d'un tri de cartes. Ainsi, lors d'un tri de cartes ferme, l'etape de 
nommage peut etre supprimee, ou transformee en validation des titres 
des groupes proposes. 
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Figure 10-8 Dans un tri de cartes ouvert, aucun groupe n'est forme a priori. 
Dans un tri de cartes ferme, les categories sont determinees a I'avance. 

Prenons l'exemple d'un tri de cartes ferme mene sur les jeux de societe 
du site d'Asmodee : il a permis de modifier les intitules des rubriques 
predefinies pour coller aux representations mentales des participants et 
aux besoins qu'ils ont exprimes lors des sessions de tri. Leurs hesitations 
a placer certains jeux dans la categorie Bluff et Manigances, du fait du 
mot Manigances et de l'absence de la notion d'encheres, ont conduit a 
modifier Fintitule Bluff et Manigances en Bluff et Encheres. 



Selon le support du tri de cartes 

Le tri de cartes peut etre physique (il est mene en face a face, avec un sup- 
port materiel qui sont des cartes) ou informatise (il est mene sur ordina- 
teur, avec un support materiel qui sont des mots ou des objets a l'ecran). 



Nom 
du groupe 
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Le tri de cartes physique 

Ce que Ton appelle le tri de cartes physique est celui que nous vous pre- 
sentons depuis le debut de ce chapitre : il s'agit de faire travailler vos par- 
ticipants lors d'un exercice sur table, avec des supports reels. 

II semble que ce support materiel soit ideal pour travailler sur l'organisa- 
tion des contenus d'un site web et ce, pour plusieurs raisons : 

• Tout d'abord, la composante d'interaction humaine presente dans le 
tri de cartes physique est un element indispensable, qui fait tout le 
benefice de la methode. Ainsi, le tri de cartes est aussi un support 
pour la discussion et permet, a ce titre, d'approcher des representa- 
tions mentales non accessibles lors d'un tri informatise. 

• De plus, le principe de la methode est sans doute plus clair pour le parti- 
cipant et rimplication plus importante dans une activite en face en face. 



VOCABULAIRE 
Tri de cartes physique ou papier 

Le tri de cartes physique est aussi appele tri de cartes 
papier, puisque le support utilise par vos participants 
est presente sous forme de papier ou de carton, en 
tout cas d'un support saisissable et non virtuel. 
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Enfin, mais ce n'est qu'une hypothese, il semble que la composante 
motrice (prendre, manipuler, deplacer, ranger les cartes) soit un sup- 
port a la reflexion et stimule l'activite de categorisation mentale. 



Le tri de cartes informatise 

Le tri de cartes peut aussi etre conduit sous forme informatique. Vous 
pourrez etre amene a pencher pour cette solution principalement en raison 
du grand nombre de donnees quelle permet d'obtenir en un temps record 
par rapport au tri de cartes physique. Le support informatique facilite a la 
fois la collecte des donnees, leur analyse et leur restitution. Le temps 
d'administration de l'epreuve est nul et les donnees sont automatiquement 
stockees sous forme informatique, sans necessiter de retranscription. 

Cependant, la quantite d'informations que Ton peut recueillir par cette 
methode ne remplace pas la qualite du resultat obtenu avec le tri de carte 
physique. 

II est notamment difficile, dans un tri de cartes a distance, de tester 
l'ambiguite puisque Ton nest pas face aux participants et que ce type 
d'observations ne ressort pas dans les resultats quantitatifs (au final, les 
participants finissent par choisir la rubrique la plus adaptee). Or le traite- 
ment de l'ambiguite est une des problematiques les plus importantes en 
architecture de l'information. En effet, l'objectif principal est que l'inter- 
naute n'hesite pas et ne se trompe pas de rubrique. Ce defaut peut toute- 
fois etre compense par une moderation en temps reel du tri de cartes 
informatique. Dans ce type de procedure, un animateur guide le partici- 
pant a distance, de la meme maniere qu'il l'aurait fait en face a face. 

Tableau 10-1 Avantages des tris de cartes physique et informatise 



Tri de cartes physique en temps reel 


Tri de cartes informatise a distance 


- Optimise la comprehension de la methode par le participant et son implication dans I'exercice. 

- Permet de recueillir les verbalisations et comportements non verbaux du participant. 

- Permet de detecter les items ambigus. 

- Permet de profiter de la venue de participants pour une session de test utilisateur et, ainsi, de les 
garder plus longtemps en beneficiant du sursaut attentionnel lie a la rupture de l'activite "sur ordi- 
nateur". 


- Facilite I'enregistrement et le traitement 
des donnees, permettant essentiellement de 
traiter plus facilement un panel plus large. 



On peut beneficier de certains avantages des deux types de tris en condui- 
sant des tris de cartes informatises en face a face (et non a distance). 
Autrement dit, vous etes assis a cote du participant qui utilise l'outil infor- 
matique de tri de cartes. On preferera alors un logiciel base sur la meta- 
phore du tri de cartes physique (ou les cartes ressemblent a des cartes, 
peuvent etre deplacees en drag & drop, empilees, etc.). C'est par exemple 
le cas de CardZort de Jorge A. Toro. Void une liste des outils informati- 
ques les plus interessants pour le tri de cartes et leurs caracteristiques. 
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Tableau 10-2 Les outils pour realiser un tri de carte informatise 



Outil 


Prix 


Renommage 
des cartes 


Tri 

ferme 


Plate-forme 
technique 


Fonctions 
d'analyse 


Remarques 


Cardsort 

http://www.cardsort.net 


Gratuit 


Non 


Oui 


Logiciel 
Windows/Mac 


Non 


Max 1 00 cartes 


OptimalSort (Beta) 
http://www.optimalsort.com 


Gratuit 
jusqu'en aout 
2007 


Non 


Oui 


Web 


Non 


L'applicatif le plus pousse et le plus 
flexible pour recolter des donnees. 


XSort 

http://www.ipragma.com/ 
xsort 


19 $ a 239 $ 

Version 
d'essai 30j 


Non 


Oui 


Logiciel Mac 


Oui 


Le seul logiciel con^u specifique- 
ment pour Macintosh. 


CardZort + CardCluster 

http://www.cardzort.com 


50$ a 150$ 
pour une 
licence 
Version 
d'essai 30j 


Non 


Non 


Logiciel 
Windows 


Oui 




UzCardSort 

http://uzilla.mozdev.org/ 
cardsort.html 


Gratuit 


Non 


Oui 


Web 


Oui 




SynCaps 

http://www.syntagm.co.uk/ 
design/cardsort.shtml#syncaps 


66 $ pour une 
licence 
Version 
d'essai 30j 


Oui 


Oui 


Logiciel 
Windows 


Oui 


Necessite un lecteur de code barres 
(et du papier concu pour). 
Principe original qui permet de rea- 
liser du tri de cartes physique, et de 
pouvoir I'analyser grace a un sys- 
teme informatique (les cartes sont 
imprimees sur du papier avec des 
codes qu'un lecteur permet de tra- 
duire en termes informatiques). 
Inclut la notion de Quality of fit, 
permettant aux participants de se 
prononcer sur la pertinence de 
I'appartenance d'un item a un 
groupe. 


WebSort 

http://www.websort.net/ 


De 99 $ pour 
une etude a 
1499$ pour 
une annee 
d'utilisation 
illimitee 


Non 


Oui 


Web 


Oui 


L'outil le plus interessant dans ceux 
qui couplent fonctions d'enregistre- 
ment et d'analyse. 



Cette liste ne mentionne pas les outils pour lesquels il n'existe pas de licence. 
Ce sont pour la plupart des outils proprietaires proposes par des societes de 
consulting (notamment UserZoom etMindCanvas). 
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Methodologie Le tri de cartes est une 
methode individuelle 

Comme le test utilisateur, le tri de cartes est une 
methode individuelle, oil Ton ne fait participer 
qu'un utilisateur a la fois. Pendant la session de tri, 
I'animateur se consacre entierement a cet utilisa- 
teur. Vous pouvez toutefois imaginer conduire des 
tris de cartes collectifs, en etant conscient que vous 
n'obtiendrez pas le meme type de donnes. Plus 
proche du brainstorming, cette deviation de la 
methode de base est done plutot adaptee lorsque 
vous travaillez avec des experts ou avec vos clients. 



Selon votre panel de participants 

Avec des internautes pour s'adapter a leurs attentes 

Le tri de cartes est classiquement mene avec des utilisateurs representa- 
tifs de la cible du site. Dans la pratique, le type de participants est selec- 
tionne en fonction des caracteristiques du projet et de l'expertise 
supposee des utilisateurs. 

Le tri de cartes avec des utilisateurs finaux ou potentiellement finaux est 
le modele le plus utilise. II permet de cerner la facon dont ces utilisateurs 
percoivent l'organisation des informations. En effet, ils ont forcement 
en tete un modele mental qui met en jeu les contenus du site. Les parti- 
cipants peuvent alors etre de deux types : 

• Des representants d'utilisateurs finaux, selectionnes pour leurs 
caracteristiques, car ils presentent un profil identique a celui de la 
cible (e'est souvent le cas pour les sites web grand public). 

• Les veritables utilisateurs finaux (e'est le cas pour les applications 
professionnelles expertes, les intranets ou extranets). 

Avec des specialistes pour s'inspirer de leur expertise 

Le tri de cartes peut etre mene avec des specialistes metier, afin de 
recolter des observations sur la maniere dont ils voient les choses en tant 
qu' experts. C'est notamment indispensable lorsque vous concevez un 
site ou une application sans etre specialiste du domaine. Vous avez alors 
necessairement besoin d'une validation experte afin de coller aux besoins 
de vos utilisateurs finaux. 

Des tris de cartes preliminaires peuvent aussi etre menes avec le client. 
La technique du tri sert alors surtout a se faire une idee du fonctionne- 
ment d'une entreprise et de la facon dont les informations doivent inte- 
ragir. Pour des applications professionnelles, cela permet a l'ergonome 
de mieux comprendre le metier et les enjeux relatifs aux informations. 

II s'agit done de se servir de l'expertise metier que portent vos clients. 
Par exemple, pour categoriser le catalogue des jeux sur le site 
d'Asmodee, editeur de jeux de societe, un tri de cartes client est absolu- 
ment necessaire, puisque vous avez peu de chances, voire aucune, de 
trouver des utilisateurs finaux connaissant et sachant definir tous les jeux 
distribues par Asmodee. Vous allez done chercher la connaissance ou 
elle se trouve, e'est-a-dire chez les specialistes du domaine. Ce sont sou- 
vent vos clients eux-memes. 
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Attention toutefois : il ne s'agit absolument pas de se satisfaire de ces 
donnees, puisqu'elles sont forcement orientees specialistes. Vous devez 
ensuite completer avec des donnees provenant des internautes eux- 
memes, c'est-a-dire ceux qui sont censes acheter des jeux en ligne sur le 
site de votre client. 

Finalement, le tri de cartes differera forcement suivant la personne que 
Ton a en face de soi. C'est, de toutes facons, le support d'une discussion 
et d'une interaction autour des contenus, et parfois un bon moyen pour 
formaliser les choses. 

Ainsi, cette methode du tri de cartes peut meme tendre vers une methode 
de conduite de projet, consistant a definir a la fois les contenus et la 
maniere dont ils seront presentes a travers le site. Elle devient alors une 
methode de co-construction de l'architecture de l'information d'un site 
web. 
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Selon le niveau de profondeur du tri de cartes 

Comme nous l'avons deja evoque, un tri de cartes ne traite pas force- 
ment de la totalite des contenus d'un site web. II peut, soit etre mene sur 
l'ensemble d'un site, soit sur un theme en particulier qui semble specia- 
lement interessant. 

Par exemple, lors d'un tri de cartes sur le site de la Camif, on ne 
demande pas aux participants de ranger les contenus de l'ensemble du 
site, mais exclusivement du catalogue produits puisque c'est le cceur du 
sujet : il faut que les internautes trouvent ce qu'ils cherchent via l'arbo- 
rescence. On n' evoque done pas ou sont rangees les informations con- 
cernant la livraison, les modes de paiement, le catalogue papier, les 
informations corporate ou le Club Camif. 

Extensions possibles au tri de cartes 

Le principe du tri de cartes en tant qu'exercice se pratiquant sur des con- 
cepts a l'aide d'un support materiel peut etre etendu a d'autres methodes 
plus proches du questionnaire ou de l'entretien. 

On peut ainsi travailler sur la hierarchisation de criteres, par exemple 
afin de comprendre ce qui guide un internaute dans le choix d'un pro- 
duit plutot que d'un autre. 

Ce type d'extension est plus indiquee dans le cas de travaux sur un pro- 
duit tres specifique, ou les criteres sont reduits et bien cadres. Si Ton 
prend l'exemple du domaine du vin, on peut s'inspirer de la methode du 
tri de cartes en presentant a l'internaute un ensemble de cartes represen- 
tant differents vins et leurs caracteristiques. 



METHODOLOGIE Croisement et couplage 
des 4 dimensions 

Vous pouvez croiser ces 4 dimensions afin de vous 
fabriquer une methodologie sur mesure en fonc- 
tion des besoins de votre projet. 
Vous pouvez aussi les coupler a travers plusieurs 
sessions de tri, afin d'affiner vos conclusions. 
Par exemple, toujours sur le site de I'editeur de 
jeux Asmodee, voici les etapes suivies : d'abord un 
tri de cartes ouvert et collectif avec le client, expert 
de son domaine, afin de creer les gammes 
produits ; puis un tri de cartes ferme individuel 
avec des internautes, afin de valider les categories 
ayant resulte du premier tri. 
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Figure 10-9 

Exemple d'une extension 
de la methode du tri de cartes. 




Dans cet exemple, l'internaute doit choisir un vin parmi un ensemble et 
nous expliquer son cheminement mental, les criteres qu'il privilegie (le 
prix, la couleur du vin, sa provenance, les recommandations du caviste ou 
d'internautes, l'allure de 1' etiquette, l'annee, ce qu'il veut faire de ce vin : 
l'offrir, l'acheter pour sa cave, pour un diner dans la semaine, etc.) et com- 
ment il croise ces criteres. On essaie ainsi de degager une methodologie de 
selection et s'il existe des points communs a tous les participants. 

Les resultats de ce type d'etudes peuvent servir a prendre des decisions 
en termes d'arborescence, mais aussi concernant les raccourcis a mettre 
en place sur les pages-cles. 

S'inspirer du materiel du tri de cartes permet de s'abstraire de l'interface 
dans ces etapes. En effet, cela conduit a cerner veritablement les deter- 
minants servant de base aux internautes pour prendre des decisions dans 
un objectif donne. On se rapproche ainsi de la methode du test utilisa- 
teur, dans le sens ou Ton place l'internaute dans une strategic specifique 
a l'aide d'un scenario, tout en utilisant un support qui ressemble plus a 
celui du tri de cartes. 

Enfin, ce genre de demarche est ideal pour obtenir des verbalisations de 
la part de vos participants. lis semblent en effet plus enclins a parler 
dans ce type d'exercice que lors d'une session de test, durant laquelle ils 
se concentrent sur la problematique tres precise de « reussir a faire ce que 
Ton me demande ». 

On ne peut toutefois pas se passer de coupler ce type de methode avec 
une validation par un test utilisateur, devant l'ecran, dans un contexte 
qui ressemble veritablement a la navigation sur le Web. 
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Ce que Ton peut tirer d'un tri de cartes : 
analysez les donnees 

Une fois que vous avez mene une session de tri de cartes, vous vous 
retrouvez avec une masse de donnees sur le comportement individuel de 
vos participants. Le defi methodologique d'un tri de cartes reside dans 
l'analyse et Interpretation de ces donnees. 

Pour chaque participant, on obtient une liste de groupes comprenant des 
items. L'analyse des donnees d'un tri de cartes consiste a reperer ce que 
Ton appelle des clusters. Grossierement, la notion de cluster s'apparente a 
celle de groupe. II s'agit done de reperer quelles formes ressortent des 
donnees de toutes les sessions confondues. 

II y a forcement des choses qui vont vous sauter aux yeux, soit pendant 
les passations, soit en regardant les resultats bruts sous forme de tableau. 

C'est souvent la logique et l'experience qui vous permettront de reperer 
des patterns de resultats, e'est-a-dire des elements qui se retrouvent chez 
plusieurs de vos participants. De plus, chaque praticien se forge en 
general ses propres tableaux d'analyse, permettant de visualiser des 
resultats sous forme brute et resumee. Vous pourrez trouver sur le Web 
de nombreux exemples de ces templates. 

Bien sur, en parallele de cette analyse sur le vif, il existe des methodes de 
traitement des donnees brutes, basees sur des algorithmes statistiques. 
La plus adaptee a l'analyse des donnees issues d'un tri de cartes est l'ana- 
lyse de clusters. C'est un ensemble de methodes statistiques qui a pour 
objectif d'identifier des groupes d'echantillons au comportement com- 
parable ou presentant des points communs. Elle se base sur la frequence 
d'association d'items et permet de partir de resultats heterogenes pour 
en tirer des categories. 

L'analyse de clusters produit des resultats qui sont souvent representes 
sous la forme de dendrogrammes (en grec, dendron signifie arbre), per- 
mettant d'organiser hierarchiquement les items selon leurs frequences de 
classement et l'importance relative de proximite entre items. 

Ce n'est pas parce qu'on utilise l'analyse de clusters pour traiter les don- 
nees d'un tri de cartes que Ton doit oublier que, la plupart du temps, le 
tri de cartes n'est pas un outil de recherche quantitatif Le fait que Ton 
ne peut pas faire de quantitatif si Ton n'a pas un nombre suffisant de par- 
ticipants explique en partie cela. Mais cette conclusion provient surtout 
du fait que les donnees retirees d'une session de tri ne peuvent pas se 
resumer aux groupements effectues par les participants. 
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Methodologie L'analyse de clusters 
n'a pas reponse a tout 

Les analyses quantitatives sous forme de dendro- 
grammes ne sont pas toujours adaptees aux don- 
nees qui proviennent d'un tri de cartes. Selon un 
des experts mondiaux du tri de cartes, Sam Ng, 
cela revient a proposer une reponse quantitative a 
quelque chose qui est finalement du ressort du 
qualitatif. 
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Le tri de cartes en bref : utilite et limites 



METHODOLOGIE Reconnattre I'utilite et les 
limites du tri de cartes 

Ce n'est pas une methode ideale en soi, qui resout 
toutes les problematiques. C'est cependant le 
meilleur outil dont on dispose a I'heure actuelle 
pour obtenir aussi rapidement ce type de resultats. 



Pour conclure, le tri de cartes est une methode tres interessante au vu des 
besoins et contraintes de l'ergonomie web. Economique et rapide, elle 
permet d'obtenir des donnees utilisateurs (c'est-a-dire des donnees qui 
ne sont pas basees uniquement sur l'expertise du concepteur). Le tri 
fournit des informations fondamentales pour construire un rubriquage 
et un vocabulaire d'interface adaptes a l'utilisateur final. 

On peut neanmoins se demander si la maniere qu'ont les gens de ranger 
les choses peut reellement etre assimilee a celle qu'ils ont d'aller chercher 
ces memes choses. Ainsi, la methodologie meme du tri serait basee sur 
une conception bottom-up des donnees (ou Ton part des contenus pour 
acceder aux representations mentales), alors que la recherche d'informa- 
tion sur le Web releve a l'inverse d'un processus top-down (ou les repre- 
sentations mentales des internautes guident la recherche de contenus). 

Or, la methode du tri de cartes ne pretend pas evaluer la maniere dont 
les internautes vont chercher des contenus (c'est, par contre, l'objectif du 
test utilisateur), mais essaie plutot d'acceder a leurs representations men- 
tales. Dans ce cadre, la procedure du tri parait tout a fait adaptee. 

Le second defaut du tri de cartes (surtout dans sa modalite fermee) est 
qu'il supprime tout le contexte d'un site web. Cependant, il faut bien 
comprendre qu'on ne teste que la pertinence des termes et des regroupe- 
ments. Pour y arriver, il faut disposer de la situation la plus pure possible 
et revenir au premier niveau d'abstraction. Des mots sur du papier sont 
done parfaits pour etudier la categorisation mentale en elle-meme. On 
evite ainsi tout effet du a la transposition d'une architecture dans un site 
web (par exemple, dans un site, une option de menu peut ne pas etre vue 
par l'internaute du fait meme des choix d'interface). 

Le tri de cartes doit done etre considere une methode « basse-fidelite » 
pour documenter un modele mental utilisateur. Elle ne sert pas a 
degager comme par magie 1' architecture finale d'un site, mais plutot a 
obtenir des indices pour la construire de la meilleure facon qui soit. 

Pour conclure, le tri de cartes est une methode a ne pas manquer, mais 
une methode parmi d'autres : la conception d'une architecture de l'infor- 
mation est le fruit de plusieurs methodes qui, utilisees simultanement, 
permettent de croiser des points de vue expert et utilisateur et, ainsi, 
d'esperer couvrir les defauts potentiels d'une arborescence. 

Apres avoir travaille sur le plan conceptuel de l'architecture de l'infor- 
mation, vous devez valider vos choix en observant l'efficacite de leur 
mise en place a l'ecran. II s'agit done d'etudier comment vos internautes 
s'en sortent lorsqu'ils essaient reellement d'atteindre des objectifs precis 
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sur votre site. C'est l'objectif de la methode du test utilisateur, que nous 
evoquons dans le prochain et dernier chapitre. 
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chapitre 



11 




Les tests utilisateurs 



Vous voulez vraiment savoir si votre site Internet est efficace, 
intuitif et agreable a utiliser ? Nous avons la solution, et elle 
est tres simple : confrontez des utilisateurs a votre site et 
observez ce qui se passe. 

Personne n'est mieux place que vos internautes pour vous aider 
a evaluer ce que Ton appelle la qualite d'utilisation d'un site 
web. Ainsi, vous aurez beau avoir toute l'expertise du monde, 
rien ne remplacera jamais l'observation d'internautes 
en situation reelle de navigation sur le Web. 



SOMMAIRE 

► La preparation du test 

► Le deroulement d'un test 
utilisateur 

► Apres le test : analyse 
et recommandations 

► Plus loin que le test utilisateur : 
I'usage reel 

MOTS-CLES 

► Test utilisateur 

► Plan de test 

► Scenarios d'utilisation 

► Objectifs d'utilisabilite 

► Prototypes 



Methodologie 
Le test utilisateur en quelques mots 

« Imaginons que votre machine a laver vienne de 
vous lacher et que vous souhaitiez en acheter une 
nouvelle sur ce site. » La methode du test utilisa- 
teur consiste a placer des internautes dans des 
situations realistes en leur soumettant une suite 
de petits scenarios tels que celui-ci. Vous allez 
ensuite observer minutieusement comment ils 
essaient d'accomplir cette tache. 



Figure 11-1 

Le test utilisateur se deroule lors de sessions 

individuelles, ou un observateur accompagne 

un internaute qui navigue sur un site web. 



Methodologie Et si je saute cette etape ? 

Mauvaise idee. Le test utilisateur est la methode la 
plus fine, la perle de I'ergonomie web, dans le sens 
oil c'est celle qui se rapproche au plus pres de 
I'utilisation reelle du site par les internautes aux- 
quels il est destine. 

Ce n'est qu'en faisant intervenir ces derniers dans 
un contexte de navigation sur le Web que Ton peut 
veritablement pretendre faire de I'ergonomie. 
Cette methode est done irremplacable lorsque Ton 
souhaite vraiment beneficier de retours objectifs 
sur la qualite d'utilisation d'un site web. Et, vu sa 
grande flexibilite, vous n'avez aucune excuse pour 
ne pas passer a I'acte I 



On y arrive. Apres avoir etudie les fondamentaux de I'ergonomie, appris 
a les appliquer lors des phases de conception et a impliquer les utilisa- 
teurs lors de sessions de tri de cartes, vous savez presque tout des prin- 
cipes et methodes de I'ergonomie. Reste un dernier point, fondamental, 
qui vous aidera a boucler le cycle de conception ergonomique ideal : les 
tests utilisateurs. 

La methode du test utilisateur repond a la demarche suivante : pour 
adapter nos sites aux internautes, allons regarder ce qu'ils y font, com- 
ment ils le font et ce qu'ils nous en disent. II s'agit done d'analyser le 
comportement en direct arm d'estimer si le site repond correctement aux 
besoins de ses utilisateurs. 

Le principe d'un test utilisateur est tres simple : vous observez un inter- 
naute naviguer sur un site web en fonction de scenarios que vous lui 
aurez soumis. II essaie done de realiser sous vos yeux les taches qui vous 
interessent. 




Cette strategie d'observation d'internautes en train de naviguer sur un 
site web permet de vous orienter sur ses defauts d'un point de vue 
utilisateur : il s'agit de reperer ce qui pourrait venir entraver la realisation 
de la tache assignee a vos visiteurs. 

Certes, le test utilisateur est la methode d'ergonomie web par excellence, 
mais cela ne signifie pas pour autant quelle est inabordable en termes 
d'investissement ou d'expertise. Nous verrons qu'un test utilisateur peut 
etre mene de diverses manieres, qui influent sur le cout total du test. En 
outre vous pouvez conduire des tests utilisateurs que vous soyez ergonome 
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ou non. C'est une methode a la portee de tout le monde, et non reservee 
aux experts. Pour la mettre en oeuvre, il faut juste bien en comprendre les 
tenants et les aboutissants, sans oublier de respecter quelques regies. 
Evidemment, plus vous conduirez de tests, meilleur vous serez ! 

Dans ce chapitre consacre aux tests utilisateurs, nous vous presentons les 
principes theoriques de cette demarche, ses bases methodologiques, 
ainsi que des conseils pratiques pour la mettre en oeuvre. 

Methodologie Fuyez le test pour le test 

Ce n'est pas parce que la methode du test utilisateur est ideale pour 
adapter votre site a vos internautes que vous devez la mettre en oeuvre a 
tout prix. Surtout, fuyez le test pour le test. Si vous disposez des investis- 
sements requis en termes de temps, budget et personnes pour mettre en 
place un test utilisateur, faites-le bien ! Cela signifie d'abord recourir a 
cette methode au moment opportun. En effet, ce n'est pas toujours le 
bon moment pour faire un test. II est notamment deconseille de faire des 
tests utilisateurs sur une interface que I'on sait bourree de problemes. 
Vous verrez dans la suite de ce chapitre que cette problematique est 
etroitement liee au support de test, c'est-a-dire a ce que vous allez tester. 



Preparer votre test 

La premiere etape d'un test utilisateur consiste a le preparer. Si ce n'est 
pas la plus couteuse en termes de temps, c'est pourtant elle qui determi- 
nera en grande partie la qualite des resultats que vous obtiendrez. 

Les participants d'un test utilisateur 

Commencons par les participants : ce sont eux qui constituent le cceur 
de la methodologie du test utilisateur. C'est a leur intention que Ton 
concoit le test, et ce sont eux qui vont nous aider a comprendre les points 
positifs et negatifs de notre interface. 

En ce qui concerne la selection des participants, la regie a suivre s'enonce 
ainsi : ils doivent etre les plus proches possibles des internautes qui vont 
reellement venir consulter votre site. Qui devez-vous observer ? 

Des participants plus vrais que nature 

La qualite de votre recrutement conditionnera fortement la qualite des 
resultats que vous pourrez obtenir. Le critere central qui doit guider la 
selection des participants est de choisir des personnes representatives de 
votre cible. 






Idee recue Pas besoin de tests, 
j'ai le meilleur expert de I'univers 

Faux. Tout expert qu'il soit, aucun specialiste de 
I'ergonomie ne peut pretendre remplacer la parti- 
cipation d'utilisateurs reels et I'observation en 
direct des usages. Chaque test utilisateur apporte 
son lot de participants qui utilisent le site d'une 
maniere que vous n'auriez jamais imaginee. Le 
test utilisateur doit etre couple avec un regard 
d'expert, mais aucune de ces methodes n'est suffi- 
sante en elle-meme. 



Idee recue Pas besoin de tests, 
c'est moi qui ai concu le site 

Faux. Vous aurez beau avoir mis tous vos efforts 
dans la conception d'un site intelligent, qui res- 
pecte ses internautes, dans les regies de I'art de 
I'ergonomie, cela ne suffit pas. Apres avoir tra- 
vaille ne serait-ce que quelques jours sur un projet, 
vous avez deja perdu I'innocence necessaire pour 
juger de I'utilisabilite du site en question. Vous 
n'avez pas le recul suffisant pour vous conduire 
comme un internaute vierge de toute connais- 
sance sur votre site. II est en outre probable qu'en 
tant que concepteur web, vous soyez bien loin du 
profil des cibles attendues. Enfin, la puissance du 
test utilisateur vient aussi de votre rencontre avec 
plusieurs internautes. Alors que, vous, vous etes 
seul... (non, I'equipe projet ne compte pas). 



Idee recue Je ne peux pas faire de tests 

si je n'ai pas de participants 

representatifs de ma cible 

Faux. Ne vous retenez pas de faire un test sous pre- 
texte que vous ne pouvez faire participer que des 
collegues ou votre entourage proche (pour des rai- 
sons de budget, de delais, de complexite de recrute- 
ment ou de confidentialite). Encore une fois, 
appliquez la devise du C'esr mieux que rien. 
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Dans CE livre Les personas vous aident 

La creation de personas (voir a ce propos le 
chapitre 4 de ce livre) vous aura deja permis de 
debroussailler le terrain pour definir votre cible. 
Attention toutefois : les participants a un test utili- 
sateur ne doivent pas forcement tous correspondre 
a un persona, lis peuvent tout a fait representer 
« I'utilisateur moyen », alors qu'un persona est en 
general plus prototypique que stereotypique. 



• Dans le cas de sites web grand public, vous allez recruter des partici- 
pants qui feront office de representants pour la population generate 
des visiteurs de votre site. Ce ne sont done pas forcement des gens 
qui se rendront en realite sur votre site, mais qui ont le meme profil 
que vos visiteurs. 

• Dans le cas d'intranets, les participants seront un extrait issu de 
l'ensemble des utilisateurs reels. 

Sur des panels aussi petits que ceux du test d'ergonomie de terrain, la 
qualite de la selection prend une importance considerable. Si 2 partici- 
pants sur un panel de 8 ne correspondent pas a votre cible, vous perdez 
un nombre considerable de donnees qui auraient pu vous aider. 

Des participants representatifs de votre cible reelle 

Pour recruter des participants representatifs, vous allez les selectionner 
en prenant en compte certains des criteres suivants, selon qu'ils sont dis- 
criminants pour votre cible ou non. S'ils sont discriminants, vous devez 
selectionner exclusivement la modalite que vous attendez chez vos parti- 
cipants, ou assurer pour les participants de votre panel une repartition 
calquee sur celle de vos internautes. S'ils ne sont pas discriminants, vous 
devez representer chacune des modalites a part egale. On appelle cette 
phase de composition du panel \z phase d'echantillonnage. 

Sexe 

Si le sexe est un facteur discriminant de votre cible, choisissez un panel 
representatif de la population reelle de vos visiteurs. Ce principe peut 
vous amener a recruter selon 3 modeles : 

• Soit uniquement des femmes ou des hommes. Par exemple, sur un 
site de bourse en ligne ou de magazine sportif, vos participants seront 
principalement des hommes, alors que sur un site de conseils beaute 
ou de mode, ils seront principalement des femmes. 

• Soit les deux en repartition inegale. Par exemple, sur un site de jardi- 
nage, vous pourriez avoir une repartition en 70 % de femmes et 30 % 
d'hommes. 

• Soit les deux en repartition egale. Par exemple, sur un site de vente 
en ligne de produits culturels, les deux seront representes a parts 
egales. 

Age 

L'age est le plus souvent traite en termes de tranches. En effet, l'age 
moyen ne doit pas etre un critere de recrutement! Ne cherchez pas uni- 
quement des personnes de 35 ans parce que e'est l'age moyen de vos visi- 
teurs, au risque de fausser la representativite de votre panel. En effet, 
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cette moyenne peut en effet aussi bien correspondre a une plage allant de 
22 a 79 ans qua un intervalle s'etendant de 30 a 40 ans, ce qui n'est 
absolument pas la meme chose ! On peut envisager trois modeles de 
recrutement par tranche d'age : 

• Soit une seule tranche d'age. Dans ce premier cas, vous allez par 
exemple rechercher des gens entre 40 et 50 ans, sans forcement con- 
siderer les variations au sein de cet intervalle. 

• Soit un panel compose de plusieurs tranches d'age egales. Ce second 
cas s'applique si l'eventail des ages au sein de votre population cible est 
large, mais que les utilisateurs y sont repartis de maniere plutot homo- 
gene. Si par exemple votre population est de type 25-55 ans, vous 
devez creer differentes tranches dage dans lesquelles recruter un 
nombre egal de participant. Dans cet intervalle, prevoyez par exemple 
3 tranches d'age : 25-35, 36-45 et 46-55 ; constituez 3 groupes de 4 
participants pour un panel total de 12 utilisateurs. Si vous pouvez 
eviter les ages charnieres, votre panel sera d'autant mieux constitue. 

• Soit un panel compose de plusieurs tranches d'ages inegales. Une 
population de type 25-55 ans peut etre repartie de maniere hetero- 
gene, c'est-a-dire que toutes les tranches d'ages ne sont pas egale- 
ment representees. Vous devez alors composer quelques tranches 
d'ages qui necessiteront plus ou moins de participants selon la repre- 
sentativite qua chacune des tranches d'age dans votre population 
cible generale. 

Metier et CSP 

L'activite professionnelle et la categorie socio-professionnelle de vos parti- 
cipants peuvent etre des criteres discriminants lors de leur recrutement. 
Attention cependant a n'en tenir compte que si e'est strictement necessaire. 

• Le metier de vos participants peut etre primordial pour l'interet du test. 
Par exemple, un test utilisateur sur le site d'OSEO, etablissement public 
a vocation d'aide aux PME, necessite la participation d'entrepreneurs : 
ces derniers constituent en effet la cible privilegiee du site web. Un par- 
ticipant qui ne serait pas entrepreneur n'aurait pas la culture et les 
reflexes necessaires pour comprendre ce qui se raconte sur le site 
d'OSEO. Coller au metier de vos visiteurs reels est aussi un moyen pour 
qu'ils comprennent mieux les scenarios que vous leur proposez. 

• La categorie socio-professionnelle peut aussi etre un critere de 
recrutement non negligeable. Par exemple, vous ne proposerez pas a 
des personnes aux revenus modestes de participer a un test sur un site 
de voyages de luxe. 



Juridique 
Autorisation parentale pour les mineurs 

Attention, si vous devez realiser des tests avec des 
mineurs, vous devez necessairement obtenir 
I'autorisation de leurs parents, et eventuellement 
exiger leur presence dans une salle attenante a la 
salle de test. 
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METHODOLOGIE « C'etait mieux, avant » 
ou la resistance au changement 

Dans un projet de refonte d'un site, il est interes- 
sant d'avoir dans votre panel des personnes qui 
connaissent deja le site actuel. lis pourront ainsi 
conduire des actions comparatives entre les deux 
versions et vous faire part de leurs impressions. 
Veillez toutefois a prendre de la distance par rap- 
port aux jugements subjectifs : il est toujours diffi- 
cile de se separer de quelque chose que Ton 
connait pour se re-habituer a un nouveau site. 



Rapport au site, a la marque ou a un domaine 

Voyez comme les exemples suivants illustrent l'importance de ce critere : 

• Votre site web existe deja ? II y a fort a parier que vous avez interet a 
faire la difference entre les gens qui le connaissent deja et ceux qui n'y 
sont jamais alles. 

• Vous lancez le site d'une marque existante dans le monde physique ? 
Faites la difference entre, d'une part, les personnes qui connaissent 
deja la marque et en sont clients et, d'autre part, ceux qui ne la con- 
naissent pas. 

• Vous proposez un programme de fidelisation client (type Flying Blue 
d'Air France, Smiles, Carte Sephora) ? Prenez en compte la diffe- 
rence entre les adherents au programme et les non-adherents. 

• Site d'un quotidien papier ? Pensez a distinguer les habitues du quo- 
tidien, qui l'achetent deja en kiosque ou sont abonnes, et les autres. 

• Site d'une association sportive ? Recrutez a la fois des personnes deja 
membres et d'autres qui ne connaissent pas encore votre association. 

• Site de jeux ? Faites la difference entre une partie du panel qui repre- 
sentera les joueurs, plutot specialistes, et 1' autre qui representera les 
acheteurs de jeux, plutot non specialistes (souvent dans l'optique d'un 
cadeau) : categories a ne pas confondre. 

Ce critere est si preponderant qu'il aura sans doute une influence sur le 
plan de test, avec deux ou plusieurs versions correspondant aux diffe- 
rents profils de visiteurs. 

Niveau d'expertise 

Vous pouvez etre amene a recruter vos participants en fonction de leur 
niveau d'expertise (par exemple, votre site Internet est destine a des 
experts en finance, connaissant tres bien Internet), ou encore a recruter 
differents niveaux d'expertise au sein de votre panel. 

Selon les specificites du projet, il peut etre utile de distinguer le niveau 
d'expertise Internet (objectivable par le nombre d'annees d'experience, la 
frequence, le type et la duree des usages, etc.), le niveau d'expertise en 
informatique en general ou dans l'utilisation d'un outil (par exemple le 
mobile), et enfin l'experience d'un domaine ou l'experience metier. 

Situation familiale, region, projets de vie, etc. 

Le recrutement peut aussi faire intervenir tout critere qui caracterise vos 
internautes s'il s'agit d'un parametre discriminant. Ce peut ainsi etre leur 
situation familiale (celibataire, marie, avec des enfants, etc.), leur lieu 
d'habitation (region, distinction ville/campagne, etc.), leurs projets de 
vie, etc. En fait, si un critere definit tout specialement vos internautes, 
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vous devez essayer de le retrouver chez les participants a votre test. Selon 
les caracteristiques de votre cible, peuvent done s'aj outer a cette liste 
nombre de criteres. 

On peut recouper tous ces criteres de maniere assez indifferente. Bien 
sur, cela aura un impact sur la representativite du panel, mais il faut 
savoir s'arreter a un moment ou a un autre, sous peine de ne jamais 
reussir a rassembler les participants necessaires. Si vous arrivez a suivre 
l'ensemble des conseils precedents, vous devriez arriver a un panel quasi- 
parfait pour realiser un test utilisateur ! 

Enfin, si vous etes en projet de refonte, notez que l'essentiel n'est pas 
forcement de recruter des internautes qui correspondent aux visiteurs 
actuels de votre site, mais plutot des internautes qui correspondent a 
ceux que vous voulez toucher ou tester plus precisement. Ainsi, l'objectif 
avoue du test peut etre d'evaluer la qualite d'utilisation du site exclusive- 
ment pour les nouveaux clients. Vous partirez alors de cette exigence a 
priori pour recruter vos participants. 



ASTUCE Recrutement : au pire, 
faites jouer votre reseau 

Si vous ne disposez pas d'un panel de testeurs ou 
ne pouvez pas faire appel a une societe specialised 
dans ce type de recrutement, faites jouer votre 
reseau. Cela est toujours mieux que de demander 
a votre collegue de bureau de participer au test 
dont vous lui parlez depuis deja trois semaines... 
Faites done jouer votre reseau de la bonne 
maniere, en envoyant massivement un appel a 
participation et en excluant d'office toute per- 
sonne qui vous serait trop proche. Souvenez-vous 
du premier critere : vos participants doivent cor- 
responds a votre cible. 



La personnalite ideale du testeur 

Sachez que tout le monde n'est pas un « bon » testeur. Nous allons evo- 
quer deux traits de personnalite que Ton apprecie de trouver chez les 
participants a un test. Bien sur, il est quasi-impossible de selectionner 
vos utilisateurs sur de tels criteres. En effet, il est souvent deja difficile de 
satisfaire d'autres criteres plus objectifs, ce qui laisse peu de latitude pour 
se preoccuper de la personnalite des participants. 

Cependant, il est important de comprendre les comportements utilisa- 
teurs qui vous apporteront le plus en termes de qualite de donnees 
recueillies, afin de pouvoir y adapter votre propre comportement. Si vous 
trouvez les qualites requises chez vos participants, vous etes alors dans la 
situation la plus facile. Dans le cas contraire, quelques consignes bien 
senties vous permettront de diriger vos participants au mieux. 

Plus ils jouent le jeu, mieux e'est 

La methode du test utilisateur est largement basee sur des mises en 
situation artificielles, ou Ton va demander aux participants d'imaginer 
qu'ils ont tel ou tel objectif 

Voyez le test utilisateur comme une sorte de jeu de role. En fonction du 
site teste et des exigences logistiques, vous pourrez avoir besoin 
d'imposer a vos participants des situations de type : « Ceci est votre tele- 
phone portable », « Ceci est votre carte bancaire », « Imaginons que vous 
voulez reserver un vol pour aller en vacances a Majorque », etc. 
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L'aptitude et la motivation de vos participants a jouer le jeu auront done 
beaucoup d'incidence sur la qualite des resultats obtenus. Meme si ce que 
vous leur demandez correspond a des situations qu'ils peuvent rencontrer 
dans la vie reelle, toutes les personnes ne reagissent pas de la meme 
maniere a ces mises en scene. Certaines arrivent mieux a se mettre en 
situation que d'autres ; elles entreront veritablement dans la peau du per- 
sonnage que vous leur aurez fabrique. Voyez cet exemple et la maniere tees 
differente dont peuvent reagir deux participants a un test utilisateur : 



Figure 11-2 

Stephanie et Marc ont des personnalites tres 

differentes qui font qu'ils s'approprient plus ou 

moins facilement le scenario de test. 




OU\, 6T TIBNS ON VA DIES SU'SU-B ADOE6 UE6, OONC J6 VAIS Ull 
ACH6T6E UN LIVE6- 

BON, 6T COIAtAS BU-B A & ANS, MAIS aU'BLLB EST 6N AVANCg SUE 
SOU A&B, J6 VAIS P6UT-6TE6 UUI PE6NDE6 UN LIVES POUE LSS PLUS 
6EANDS. 




SCBNAEK3 
"IMA&INONS tSUB VOUS AYB2 UNB NI6£6 DB £ ANS 
BT <3U6 VCUS SOUHAITI6Z Ull CFFEIE UN CAD6AU." 



Plus une personne rentre vite dans le scenario, plus elle pourra se con- 
centrer sur la realisation de la tache et non sur la situation de test en elle- 
meme. La personnalite de vos participants a done une grande influence 
sur le deroulement d'un test. 

C'est aussi leur personnalite qui va determiner la quantite de resultats 
d'interaction que vous allez obtenir. En effet, la seconde particularite 
d'un test utilisateur est d'exploiter amplement la composante verbale : il 
dependra done de la propension de vos participants a s'exprimer. 

Plus ils s'expriment, mieux c'est 

Plus vos participants seront bavards, plus vous obtiendrez de donnees. 
La tendance a parler va d'ailleurs souvent de pair avec des composantes 
de communication non verbale qui vous interesseront aussi beaucoup. 
Hochements de tete, grognements, soupirs, voire cris, sont des signes 
tres importants pour juger de la satisfaction d'utilisation. 

Tous ces elements sont autant d'indices qui vont vous aider a mieux 
comprendre ce qui conditionne l'interaction, ou les effets de cette inte- 
raction sur l'internaute. 



388 



Attention cependant : les donnees verbales qui vous interessent avant 
tout sont moins celles de type « Je donne un avis subjectif » que les don- 
nees descriptives ou explicatives, voire de recherche de comprehension, 
qui vous aident a mieux saisir les mecanismes mentaux de vos partici- 
pants. Autrement dit, peu vous importe que Bernard vous dise qu'il pre- 
fere le rose au bleu. Vous serez a l'inverse tres interesse qu'il vous 
explique son hesitation entre telle et telle rubrique. Comprendre 
l'importance de ces remarques peut vous aider a relancer vos participants 
au moment opportun. C'est notamment tres important qu'un internaute 
s'exprime lorsqu'il est en difficulte, puisque c'est le moment de l'interac- 
tion le plus important pour vous permettre d'ameliorer l'ergonomie de 
votre site. 

Ainsi, vous ne pouvez pas laisser un participant lutter pendant 10 
minutes pour trouver une information, sans qu'il emette un mot. 
Relancer votre utilisateur ne consiste pas forcement a le mettre sur la 
voie, mais plutot a lui rappeler la consigne generate de verbalisation a 
voix haute et a l'inciter a parler pour vous expliquer son cheminement. 
Nous vous donnerons dans la suite de ce chapitre quelques conseils pour 
relancer vos participants en cas de besoin. 

Enfm, veillez a ne pas faire de votre panel des super-testeurs, qui vous 
diront ce que vous souhaitez entendre et passeront la session de test a 
vous faire des propositions pour resoudre chaque defaut rencontre. 

Combien de participants sont-ils necessaires ? 

Le test utilisateur est une methode essentiellement qualitative, qui ne 
tire pas sa force du nombre de participants. Cependant, l'objectif du test 
est de reperer le maximum de defauts d'interface. Forcement, plus vous 
verrez d'utilisateurs, plus vous avez de chances d'augmenter le nombre 
de defauts remarques. 

II est tres important de distinguer nombre ideal et nombre acceptable de 
participants, et d'adapter la finesse de votre etude en fonction de ce nombre. 

Oubliez les echantillons statistiquement suffisants 

Un test utilisateur de site web ne permet pas de faire de statistiques. II 
existe des laboratoires de recherche fondamentale pour cela, et il est 
extremement rare de pouvoir beneficier d'un panel de testeurs assez 
large pour tirer des conclusions statistiquement viables. 

Autrement dit, la plupart des tests utilisateurs ne font pas intervenir un 
nombre suffisant de participants : vous ne pourrez done mettre votre 
main a couper que les resultats observes seront transferables a une popu- 
lation identique. Paradoxalement, cela suffit largement compte tenu des 
objectifs methodologiques du test utilisateur. 



ASTUCE Comment eviter les super-testeurs 

Vous pouvez appliquer la regie consistant a ne 
jamais faire participer une personne plus d'une 
fois tous les six mois. 
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II est de toutes facons difficile de tirer d'un test utilisateur de terrain des 
conclusions valides d'un point de vue scientifique, parce que tres peu de 
variables sont controlees (a la difference d'une etude de psychologie ou 
d'ergonomie fondamentale, effectuee en laboratoire et sur un panel de 
participants tres important). 

Cette liberte du test utilisateur participe meme de l'essence de la 
methode : l'objectif consiste en effet a recreer une situation d'interaction 
qui soit la plus proche possible de la realite. On accepte done des varia- 
tions tres larges de cette realite, tout en essayant d'obtenir une qualite 
d'utilisation satisfaisante quelles que soient ces variations. 

Nombre ideal et nombre acceptable de participants 

Dans l'absolu, un participant e'est mieux que rien. Vous apprendrez sure- 
ment des choses, et e'est la tout l'interet de la methode du test utilisateur. 

II est toutefois important de savoir a partir de combien de participants 
Ton peut avoir reellement confiance dans la validite des donnees obser- 
vers. C'est ce que Ton appellera le nombre ideal de participants. 

Le nombre ideal de participants a un test utilisateur est une problema- 
tique a la fois chaude et assez consensuelle dans le monde de l'ergo- 
nomie. Cependant, ce consensus vient surtout des limitations que les 
budgets imposent sur le nombre d'utilisateurs que Ton peut raisonnable- 
ment faire participer au test. 

Les specialistes de l'ergonomie utilisent tres souvent une etude de 
Nielsen & Landauer datant de 1993 pour justifier de la pertinence du 
panel qu'ils proposent. Un des resultats de cette etude montre que 5 uti- 
lisateurs permettraient de cerner 85 % des problemes principaux d'utili- 
sabilite. Depuis, plusieurs etudes (Spool & Schroeder, Woolrych & 
Cockton, Faulkner) ont pondere ces resultats, largement dependants des 
etudes et des panels etudies. 

Au vu des donnees actuellement disponibles sur le sujet, comptez qua 
partir de 10 utilisateurs, vous detecterez a minima 80 % des problemes 
d'utilisabilite d'un site Internet. Ce pourcentage monte a 95 % si vous 
faites intervenir 20 utilisateurs. 

Le probleme qui se pose dans ces evaluations d'un nombre ideal d'utili- 
sateurs vient de la nature meme des experimentations. Lheterogeneite 
des resultats obtenus peut en partie etre expliquee par les differences 
entre les types de participants, d'interfaces et de taches testees. II est 
aussi extremement rare, dans ces etudes, de prendre en compte non seu- 
lement le nombre mais aussi la gravite des problemes releves grace a 
chaque participant. 
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Le nombre d'utilisateurs ne peut done se decider sans prendre en compte 
trois parametres : 

• L'homogeneite de votre cible : est-ce que tous les participants appar- 
tiennent a la meme categorie d'utilisateurs ou avez-vous une partie 
d'experts et une partie de novices, une partie de clients et une partie 
de non clients, etc. 

• La variabilite de votre plan de test. Nous verrons dans la suite de ce 
chapitre que votre plan de test peut laisser vos participants plus ou 
moins libres de leurs gestes, et etre soumis a des variations plus ou 
moins importantes en fonction de vos participants. Plus ils sont 
libres, moins vous verrez de participants effectuer les mimes actions 
et, done, moins vous aurez de points de comparaison. Si vous avez 
plusieurs plans de tests, vous devez multiplier votre nombre de parti- 
cipants par autant, sauf si les trois quarts du test sont identiques pour 
tous les participants. 
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• La complexite de l'interface testee, a la fois en termes de complexite 
intrinseque (une interface de simulation de business plans dans le 
domaine de rinvestissement immobilier est ainsi consideree plus com- 
plexe que le site vitrine d'un fabricant de violons) et en termes de niveau 
de detail du support teste (une maquette papier est ainsi consideree 
moins detaillee que le site finalise et entierement fonctionnel en ligne). 

La regie qui regit les relations entre ces quatre parametres est la suivante : 
plus votre cible est homogene, plus votre plan de test est cadre et moins 
votre interface est complexe, moins vous avez besoin d'utilisateurs. 

II parait difficile de poser de facon peremptoire un nombre d'utilisateurs 
necessaire et suffisant pour garantir que l'ensemble des problemes d'uti- 
lisabilite seront souleves. On peut uniquement essayer de trouver un 
compromis entre les exigences financieres, temporelles et d'interface. Le 
plus important reste de faire appel a des participants qui sont les utilisa- 
teurs finaux de l'application ou pourraient l'etre. Dans la pratique de ter- 
rain des tests utilisateurs, un consensus semble se faire autour de 8 a 10 
utilisateurs. On considere que c'est la plupart du temps un compromis 
raisonnable entre cout de l'intervention et resultats obtenus. 

Le nombre acceptable de participants, quant a lui, et comme nous l'evo- 
quions en introduction, commence a un. Ce dernier vous permettra au 
moins d'avoir un oeil externe sur votre travail et de pouvoir l'analyser 
plus objectivement. Ce nombre n'est d'ailleurs pas tout a fait inconce- 
vable meme d'un point de vue statistique, puisque Nielsen et Landauer 
montrent que ce premier utilisateur permet, en moyenne (attention a 
cette notion de moyenne), de trouver presque 30 % des problemes d'uti- 
lisabilite d'un site, ce qui n'est pas rien. Veillez de toute facon a ce que ce 
participant soit le plus proche possible des visiteurs reels de votre site. 

En outre, de nombreux specialistes penchent pour ce que Ton appelle du 
test au rabais, consistant a privilegier de petits panels de testeurs (3, 4 ou 
5 selon les auteurs) afin de pouvoir conduire des tests utilisateurs plus 
souvent dans le cycle de conception. 

Plus de participants ou plus de tests ? 

Vous pouvez adopter comme choix methodologique de faire participer 
moins d'utilisateurs lors de vos tests, mais d'en mener davantage. Cette 
demarche est tees interessante, puisqu'elle permet de balayer avec un premier 
groupe d'utilisateurs les gros defauts de l'interface, puis d'affiner les observa- 
tions avec un second groupe d'utilisateurs apres avoir corrige ces defauts. 

II s'agit done de proceder a plusieurs petits tests (avec moins d'utilisateurs) 
plutot que d'en conduire un seul avec un nombre plus important de partici- 
pants. C'est ce que Ton appelle une demarche iterative, e'est-a-dire cyclique, 
ou chaque iteration est nourrie des enseignements de la precedente. 
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Interface a evaluer 



Tests utilisateurs 
> Nombre cle participants : 16 



Specifications ergonomiques sur la 
I base des resultats des tests utilisateurs J 



Tests utilisateurs - SESSION 1 
> Nombre de participants : 8 



^K^l 



> Procedure lineaire 
Session unique a 16 participants 

Hfifiii 
lifiiiii 



Specifications ergonomiques sur la 

base des resultats de la session 1 de 

tests utilisateurs 



Nouvelle conception de 
maquettes / prototypes 



Tests utilisateurs ■ SESSION 2 
> Nombre de participants : 8 



[Nouvelles specifications ergonomiques ' 

| sur la base des resultats de la session 2 

des tests utilisateurs 



> Procedure iterative 

Deux sessions a 8 participants 



Cette demarche cyclique permet d'obtenir des resultats beaucoup plus 
fins pour un cout a peine augmente (correspondant aux modifications 
incrementales du support de test suite aux resultats de chaque session). 

En effet, meme si ces resultats sont moins fiables puisqu'ils sont issus 
d'observations sur moins de participants, ils sont plus precis et plus 
approfondis de par le principe meme de la demarche. Dans la pratique, 
si tous les participants d'un premier test butent sur le meme probleme, 
on essaie de le resoudre et de tester la solution dans un second temps. En 
corrigeant les premiers problemes observes, vous liberez l'interface de 
ces problemes pour les prochains tests. Ainsi, vous n'etes pas confronte a 
un probleme recurrent chez tous vos participants et vous pouvez pousser 
plus loin votre exploration. 

Finalement, cette demarche adopte le meme raisonnement que celui 
suivant lequel on ne teste pas une interface que Ton sait deficiente. Dans 
ce cas, on fait preceder le test d'un audit puis de la conception de 
maquettes corrigeant les problemes observes. C'est ensuite seulement 
que Ton fait intervenir des internautes pour tester la qualite d'utilisation 
de ces maquettes. 



Figure 11-3 

Comparaison des demarches lineaire et itera- 
tive de test utilisateur. 
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L'etape de recrutement 

Pour vous assurer de la representativite de votre panel, vous devez choisir 
des participants qui ressemblent aux visiteurs de votre site. Void done 
quelques conseils pour reussir votre phase de recrutement. 

La logistique du recrutement 

Le recrutement de vos participants doit se faire en amont de la phase de 
test pour des raisons de logistique humaine. En effet, vous vous rendrez 
vite compte que les volontaires pour venir passer des tests ont un agenda 
comme tout le monde, et qu'il est plus efficace (vous aurez plus de 
reponses positives) mais aussi plus respectueux de les prevenir au moins 
une semaine a l'avance (voire davantage si vous en avez la possibilite). 

Commencez par une campagne de recrutement par mail, suivie d'entre- 
tiens telephoniques avec les utilisateurs correspondant aux criteres 
recherches. Ce recrutement final par telephone vous permettra d'evaluer 
si les pretendants au test ont envie de venir ou non. II est souvent tees 
facile de detecter qu'un participant, avec qui Ton a pourtant pris rendez- 
vous, ne se presentera pas. 

La motivation des participants etant une composante tees importante 
pour des resultats de qualite, sachez refuser quelqu'un que vous ne 
« sentiriez » pas, quitte a devoir chercher une nouvelle personne. La 
qualite du recrutement est trop importante, et vous ne pouvez pas vous 
permettre de sacrifier ne serait-ce qu'un participant sur une dizaine. 

Ne faites pas venir vos participants de trop loin et soyez flexible au 
niveau des horaires. Sachez ainsi que, le plus souvent, pour des sites 
grand public, les participants sont plutot disponibles tot le matin et en 
debut de soiree. 

Lorsque vous avez pris rendez-vous avec quelqu'un, n'oubliez pas de lui 
envoyer les coordonnees completes ainsi qu'un plan d'acces au lieu du 
test. Vous verrez que ce simple conseil se revele d'une grande importance 
lorsque Ton doit gerer la venue d'un groupe d'utilisateurs, et qu'une 
absence ou un retard peut avoir des consequences desagreables sur 
l'ensemble de l'etude. Dans le meme ordre d'idees, n'oubliez done pas de 
confirmer le rendez-vous avec vos participants deux jours avant le test. 

Presenter l'etude a vos invites : mystere et doigte 

La maniere dont vous allez presenter le test aux participants potentiels a 
une influence sur le fait qu'ils acceptent ou non de vous aider, mais aussi 
sur la rigueur de votre etude. 
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Votre premier objectif doit etre, chez vos interlocuteurs, d'eliminer toute 
peur de venir vous rencontrer, voire de leur en donner envie. Presentez 
done votre test de maniere positive, en mentionnant la remuneration, la 
duree (insistez sur le fait que e'est une duree maximale), le caractere ano- 
nyme de l'etude et le fait qu'ils n'ont rien besoin de savoir, de preparer, 
d'apporter. lis doivent comprendre que vous leur demandez uniquement 
une heure de leur temps contre leur avis sur un site Internet. Faites 
attention a ne pas mentionner le mot Test, car il peut faire peur. Pre- 
ferez-lui la notion d'etude voire d'enquete, plus large et que les gens 
comprennent facilement. 



ACCEPTEZ-V0US DE V£US S0UMETTEE 
A" UN TEST PSY£H0U2£k3UE DUEANT 
UEfiUEU N0US MESUEEE0NS DE 
OUELLE MANIEEE V<9US PAEVENEZ A 
EEALISEE DES TACHES IMP0SEES ? 




<k 



9\ VENEZ PAETI6IPEE A UNE 
& I ETUDE DB SITE INTEENET i 
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Figure 11-4 

La maniere dont vous presentez le test a vos participants potentiels 
a une grande influence sur le fait qu'ils acceptent ou non. Dans cet 
exemple, vos interlocuteurs seront beaucoup plus enclins a venir si 
vous utilisez le second discours plutot que le premier. 



Essayez de rester le plus vague possible. Vous pouvez meme vous refuser 
a communiquer le nom du site sur lequel vous travaillez (en cas d'inter- 
rogation de la part des gens, ce qui ne manquera pas, repondez quelque 
chose du style « Vous verrez, 9a sera la surprise. »). Cela devient critique 
lorsque le plan de test inclut une phase de decouverte du site et de la 
comprehension de son utilite. 

Cependant, lorsque vous recrutez des clients existants, et que ces derniers 
sont satisfaits de la marque que vous representez, cela peut devenir une aide 
de communiquer l'objet de l'etude (e'est par exemple le cas pour le site de la 
Camif, qui vehicule une image de qualite et de fiabilite, dont les clients 
sont en general tees satisfaits et qui a avec eux des relations tees proches). 

II est important de differencier la presentation de l'etude lors du recrute- 
ment et juste avant la session de test. Meme si vous devez detendre les par- 
ticipants, ces derniers doivent comprendre que l'heure qui va suivre est tees 
importante pour vous et qu'ils doivent done etre aussi attentifs et motives 
que possible. II est par exemple difficile d'obtenir de tees bons resultats avec 
un participant sans cesse derange et mobilise par son telephone portable. 
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Comment remercier les participants ? 

Gageons que votre panel de testeurs diminuera grandement si vous ne 
leur proposez pas un troc. Vous devez monnayer leur participation 
contre remuneration. 

II est courant de remunerer les participants a hauteur de 45 € pour une 
heure de test. Si ce montant constitue la compensation la plus courante, 
vous pouvez tout a fait choisir de donner plus ou moins, l'essentiel res- 
tant de pratiquer cet echange. La somme est souvent remise sous forme 
de cheques cadeaux generiques. Si vous testez un site marchand, vous 
pouvez aussi proposer des bons d'achat a utiliser sur le site en question. 

Si, pour une partie des participants aux tests, cette compensation est 
negligeable, ils seront tout de meme contents d'etre remercies. Dans le 
meme ordre d'idees, n'hesitez pas a leur proposer boissons, cafe, et 
autres gourmandises, afin d'instaurer le climat du test. II s'agit de les 
mettre a l'aise et de les remercier de leur venue. 



Methode 
Et dans un projet de refonte de site ? 

Attention aux raccourcis du type : « Pas de pro- 
bleme, mon support de test est tout trouve, je veux 
refondre un site qui existe deja ». 
Ne vous meprenez pas ! Ce n'est pas parce que 
vous disposez d'un site accessible en ligne que 
vous devez precisement faire tester cette interface 
a vos participants. Elle presente probablement des 
defauts que vous devrez ecumer avant de faire tra- 
vailler des internautes. Autrement dit, ne gachez 
pas vos precieuses minutes avec les participants 
sur la navigation d'un site que vous savez 
defaillant. Deux exceptions : 

• Vous avez des difficultes a faire entendre votre 
point de vue et devez prouver par a + b que 
vous avez raison. 

• Vous voulez valider quelque chose que vous 
avez remarque lors de I'audit expert, sans pou- 
voir decider de I'importance a y accorder. 



Le support de test : tester quoi, a quel moment ? 

Un test utilisateur peut etre mene sur de nombreux supports. L'objectif 
final est d'optimiser l'ergonomie d'un site web, mais vous n'avez pas force- 
ment besoin d'avoir un site en ligne pour tester vos choix de conception. 

La question du support du test utilisateur est tees liee a celle du moment 
approprie pour conduire le test. En effet, le support dont vous pourrez 
disposer est fonction du stade ou vous vous trouvez dans le processus de 
developpement. Vous pourrez difficilement conduire un test sur un site 
finalise et en ligne si vous vous trouvez tees en amont dans le projet. 

On commence un bon test utilisateur en choisissant le moment 
opportun pour le mener. Lobservation d'internautes en interaction avec 
un site Internet vous apportera toujours des donnees tees riches. Cepen- 
dant, il y a des periodes plus interessantes que d'autres pour y recourir. 

Tout depend de ce que vous souhaitez valider et du stade ou vous vous 
situez dans le processus de developpement du site web. 

Plus vous etes sur de ce que vous faites, plus vous aurez besoin d'une 
interface fonctionnelle pour supporter vos tests utilisateurs. C'est aussi le 
cas pour les interfaces tees transactionnelles, ou l'essentiel de l'interac- 
tion est constitue de saisie ou renseignement de formulaires et des 
reponses subsequentes du systeme. 



Prototype papier ou maquettes statiques a I'ecran 

Dans l'absolu, on recommande d'effectuer des tests utilisateurs des que 
possible. II faut cependant avoir quelque chose a tester et, done, avoir 
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finalise une partie de la conception. Dans ce cas, vous effectuerez des 
tests utilisateurs sur des prototypes papier ou des maquettes statiques a 
l'ecran. Ainsi, vous allez presenter successivement a l'internaute les dif- 
ferentes pages que vous souhaitez evaluer, soit sous forme papier, soit a 
l'ecran si vous n'avez que quelques maquettes a lui montrer. 

Dans ce que Ton appelle un prototype papier, c'est vous qui donnez le cote 
dynamique a partir d'un ensemble d'ecrans que vous presentez a l'utilisa- 
teur au moment voulu. Ce dernier dispose d'un crayon qu'il utilise en lieu 
et place d'un curseur de souris, pour cliquer virtuellement sur les elements 
de la maquette et ecrire dans les interfaces de saisie. En fonction de ce qu'il 
fait, vous « jouez » l'ordinateur en lui presentant les ecrans appropries. Les 
maquettes qui vous servent a simuler les ecrans sont soit des pages dessi- 
nees a la main, soit des pages imprimees a partir d'un logiciel de maquet- 
tage (voir le chapitre 9 pour une liste de ces logiciels). 

Ce type de validation tres en amont permet de verifier certains choix 
avant d'engager la conception de tout le reste du site sur ces bases. Cela 
permet de valider l'adequation aux objectifs et besoins de vos inter- 
nautes, l'architecture de l'information, les grands principes d'interaction 
ainsi que le vocabulaire employe dans l'interface. 

Si vous en avez la possibilite du point de vue du planning et du budget, 
ce type de test est done ideal, car il donne une grande liberte d'action 
apres l'observation des resultats. En effet, puisque vous etes encore en 
phase de conception, les modifications eventuelles seront moins lourdes 
a mettre en oeuvre que si le site etait deja developpe techniquement. 

Ce type de test est done ultra-recommande pour des interfaces non con- 
ventionnelles, nouvelles pour vous et pour les internautes. En effet, vous 
avez alors encore plus interet a valider tres tot les concepts fondamen- 
taux de votre interface, sous peine de completement rater votre projet. 

En general, ce type de support n'a pas encore ete traite d'un point de vue 
graphique et ce, pour deux raisons. 

Tout d'abord, il est preferable de tester des interfaces plus avancees graphi- 
quement sous la forme d'un prototype fonctionnel a l'ecran, afin de justifier 
du temps de developpement necessaire a la mise en place graphique. 

En outre, cela permet d'eviter les erreurs d'interpretation liees a la pre- 
sence d'une couche graphique. Cette premiere etape doit servir a valider 
les grands principes de l'interface : de cette maniere, on peut par la suite 
parier que, si l'interface ne fonctionne plus, c'est probablement parce que 
le design ne la traduit pas correctement. Autrement dit, si vous faites un 
test sur des maquettes graphiques et que vos internautes ne voient pas la 
barre de navigation secondaire, il y a deux explications possibles : soit elle 
est mal placee, soit son format n'est pas assez visible. Le design graphique 



Anecdote Le prototypage papier chez ~ 

Microsoft " 

i 

La methode du prototypage papier est une de £ 
celles qui a ete utilisee pour imaginer l'interface 
utilisateur de la version 12 de Microsoft Office. 



BlELIOGRAPHIE 
Tout savoir sur le prototypage papier 

Le prototypage papier n'est pas une heresie ou 
une methode de savant fou ! C'est une vraie posi- 
tion methodologique forte, revendiquee par de 
nombreux experts et donnant lieu a de nom- 
breuses publications. Si vous souhaitez appro- 
fondir le sujet, nous vous conseillons le livre de 
Carolyn Snyder, entierement consacre au sujet. 
EQ Carolyn Snyder, Paper prototyping: The 
Fast and Easy Way to Design and Refine 
User Interfaces, Morgan Kaufmann, 2005 
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choisi pour un menu peut done amener a revoir son positionnement, 
alors que la source du probleme se situe peut-etre simplement au niveau 
de sa force visuelle. 



Prototype semi-fonctionnel 

Le second niveau de support est ce que Ton appelle un prototype semi- 
fonctionnel. Celui-ci se presente toujours a l'ecran et permet de simuler 
un site qui marche, en mettant en relation des maquettes statiques par 
quelques liens fonctionnels. 

Vous pouvez fabriquer votre prototype de diverses manieres selon le 
format de vos specifications. En general, vous disposez d'une version 
statique de chaque ecran (maquette conceptuelle ou graphique) et vous 
devez lier chacun des ecrans selon le parcours attendu de l'internaute. 

Tableau 11-1 Comparaison de plusieurs techniques de prototypage 



Outil 


Avantages 


Flash 


Permet un prototypage rapide et, surtout, d'obtenir ties facilement des 
effets au survol de la souris, replicables de la meme maniere en fonction 
de types d'objets. 


HTML 


II est preferable de I'utiliser pour realiser la meme chose qu'en Flash, plu- 
tot que de monter completement un prototype au format HTML. Grossie- 
rement, vous ne faites que poser des maps sur vos images afin de 
representer les differents liens sur lesquels vous vous attendez a ce que 
vos participants cliquent. 


Powerpoint 


Double utilisation de I'outil : on fabrique le prototype a partir des maquet- 
tes realisees grace au meme outil. 


Adobe 
Acrobat 


Les fonctions de liens des documents pdf permettent de realiser tres facile- 
ment des prototypes a partir de maquettes exportees dans ce format. 


Axure RP Pro 


Double utilisation de I'outil : on fabrique le prototype a partir des maquet- 
tes realisees grace au meme outil. 



Avec ce type de support, vous etes en mesure de valider les memes ele- 
ments qu'avec des maquettes statiques animees a la main, mais de maniere 
plus avancee. Par exemple, vous pouvez valider les parcours utilisateur avec 
plus de fluidite et de fiabilite que dans un prototype manuel. 

Vos participants seront aussi plus proches d'une situation reelle de navi- 
gation puisque, dans ce cas, e'est comme d'habitude l'ordinateur qui 
reagit a leurs clics. 

Enfin, si la base de votre prototype correspond a la charte graphique du 
site final, vous obtiendrez des observations beaucoup plus fiables. Si le 
design graphique correspond a celui du site final, vous augmentez la pro- 
babilite que les resultats observes soient valides sur le site final. En effet, 
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le design graphique n'est pas sans rapport avec l'ergonomie et peut per- 
mettre de l'optimiser comme de la mettre en defaut (voir a ce propos au 
chapitre 2 l'idee recue selon laquelle l'ergonomie et le design seraient des 
ennemis jures). 

Cependant, il reste quelques points que vous ne pourrez pas valider avec 
un prototype semi-fonctionnel. Notamment, vous arriverez a reperer 
l'erreur et a analyser sa cause, mais pas a observer comment l'internaute 
va la contourner. Autrement dit, vous vous arretez la ou il bute et ne 
pouvez pas le laisser naviguer a la recherche d'une solution a son pro- 
bleme (puisque peu de choses sont fonctionnelles). 

Sur des interfaces transactionnelles, faites attention a concevoir ou faire 
concevoir le prototype apres la conception du plan de test. En effet, vous 
risquez dans le cas contraire d'obtenir des ecrans trop peu realistes. 
Meme si l'interface est factice, essayez au maximum de la rendre cohe- 
rente avec ce que vous racontez au participant. 

Le prototypage papier et le prototypage semi-fonctionnel peuvent etre con- 
siders comme des methodes de conception et de validation, alors que le test 
sur un site entierement fonctionnel est plutot de l'ordre de revaluation. 

Si vous etes assez libre dans Interpretation des resultats obtenus, pre- 
ferez une interface semi-fonctionnelle ; vous pourrez ainsi profiter de la 
flexibilite qui en decoule pour faire des changements sur l'interface. 

Toutefois, si vous devez prouver a des clients ou a vos collaborateurs la 
criticite de chaque observation, ce sera plus aise sur un site fonctionnel, 
ou les erreurs ne pardonnent pas et ou les internautes, du fait d'une 
interface pleinement fonctionnelle, se laisseront davantage aller a la cri- 
tique et a l'exploration. 

Site finalise 

Le niveau le plus avance d'un support consiste a realiser les tests sur une 
interface pleinement fonctionnelle, ou l'internaute peut cliquer sur 
n'importe quel element et obtenir une reponse de la part du systeme. On 
s'approche la d'une veritable situation de navigation sur le Web. 

Un site entierement fonctionnel est done l'interface ideale pour obtenir 
des resultats fiables puisque vous validez tous les aspects qui influencent 
l'ergonomie de votre site : sa conception, certes, mais aussi son design et 
son implementation technique. En outre, il est plus facile pour les parti- 
cipants de croire a votre histoire si le support que vous leur presentez est 
un site web. 

II existe encore une distinction a faire entre, d'une part, un site entiere- 
ment fonctionnel mais qui n'est pas en ligne et, d'autre part, un site en 



METHODE Ce peut etre le site 
d'un de vos concurrents ! 



Tout ou partie de votre test utilisateur peut se 
derouler sur les sites web de vos concurrents. Ce 
type de demarche est tres interessant, mais plutot 
en phase amont du projet. 
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ligne, connecte a la base de donnees finales, sur lequel les internautes et 
les systemes informatiques ont deja interagi, etc. 

Un site en ligne permet de demontrer l'importance de criteres d'accessi- 
bilite technologique tels que : presence et qualite des resultats dans un 
moteur de recherche, qualite ergonomique des URL, fiabilite du sys- 
teme, vitesse de chargement, interaction avec des applications systemes 
ou plug-in, avec des pop-up, etc. En effet, meme si de nombreuses per- 
sonnes sont convaincues qu'il est necessaire de satisfaire ces criteres, rien 
ne vaut la preuve par le test et un participant qui dit explicitement « si 
vous n'etiez pas la, je serais parti depuis longtemps deja » parce qu'un 
site est lent a repondre. Ce genre de problematique technique a un 
impact sur l'ergonomie de votre site et vous avez done tout interet a pou- 
voir l'evaluer. Souvenez-vous de la regie n°12 (« satisfaction de votre 
internaute ») ou nous evoquions l'efficacite technique du site web 
(rendez-vous a la fin du chapitre 5 si vous avez oublie cette regie ou ne 
l'avez pas encore lue). 

Enfin, sur certaines interfaces, vous ne pouvez obtenir de resultats precis 
en termes de qualite d'utilisation que si elles sont effectivement connec- 
tees a la base de donnees reelle, ou a une base identique en volume et en 
qualite des informations renseignees. Ceci vaut surtout sur des interfaces 
transactionnelles : recherche, creation de compte utilisateur, achat en 
ligne, interactions avec des donnees « temps reel », etc. 

Recapitulatif et interets de supports multiples 

Les trois grands types de supports de test que nous venons d'evoquer ont 
done chacun leurs avantages et leurs inconvenients. Les principaux peu- 
vent etre representes tres simplement de la maniere suivante : 



Figure 11-5 

Le niveau de validite souhaite a des impacts sur 

le cout de preparation du support ainsi que sur 

les changements a effectuer suite au test. Le 

site finalise est le support qui permet d'obtenir 

le plus grand niveau de validite. C'est aussi 

celui qui coute le plus cher a preparer et a 

modifier en fonction des resultats du test. 
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Bien sur, il existe des continuums entre ces trois types de supports. 
Ainsi, une interface statique peut presenter plus ou moins d'ecrans et 
etre plus ou moins detaillee ; un prototype semi-fonctionnel peut etre 
plus ou moins fonctionnel, plus ou moins graphique ; un site fonctionnel 
peut etre plus ou moins connecte a la realite du Web. 

Vous constatez que l'echelle de validite des resultats observes est plus 
reduite que celles des couts, car elle presente moins de variabilite. Par 
exemple, ce que vous observerez au niveau terminologie sera toujours 
valide sur l'interface finale. 

Enfin, vous pouvez dans certains cas mixer deux types de supports (mais 
jamais plus) si le projet le necessite. Par exemple, si vous etes en projet 
de refonte, vous pouvez diviser la session de test en deux parties, l'une 
portant sur le site en ligne et l'autre sur les maquettes ou prototypes de la 
nouvelle version. 

Et comme on ne repete jamais assez les fondamentaux, rappelez-vous que 
plus vous conduisez un test utilisateur tot, plus vous aurez de latitude pour 
que vos observations soient suivies de reels changements sur l'interface. 



Plan de test et objectifs d'utilisabilite 

La colonne vertebrale d'un test utilisateur est son plan, c'est-a-dire les 
questions que vous allez poser a vos participants. Ce plan de test doit 
prendre la forme d'une suite de scenarios presentes a vos utilisateurs. II 
doit vous permettre d'analyser des points particuliers de votre interface, 
de valider des hypotheses ou de trouver de nouvelles pistes de travail. Si 
vous partez d'un constat de type « Nous avons 80 % de taux d'abandon 
de panier », le test utilisateur doit vous servir a comprendre d'ou vient ce 
taux d'abandon et comment le diminuer. 

Un test comme dans la vraie vie... 

II est essentiel, lorsque Ton met en oeuvre un test utilisateur, d'avoir des 
objectifs. Vous ne pouvez pas juste regarder des internautes naviguer sur 
votre site sans ligne de conduite, ou vous prenez le risque que votre test 
ne serve a rien. 

L'objectif du test est d'observer tous vos participants realiser la meme 
action, ou en tout cas le meme type d'actions. Pour y parvenir, vous 
devez done creer une liste de scenarios qui fonctionneront comme 
autant de mises en situation pour vos participants. 



METHODE Un plan de test en vitesse 

Nous vous presentons ici les meilleures pratiques 
pour preparer un plan de test. Comprenez bien que 
vous pouvez adapter ces regies en fonction du 
niveau de rigueur de votre test. Vous aurez d'autant 
moins besoin de temps pour preparer le plan que 
vous avez peu de participants ou qu'ils sont faible- 
ment representatifs de votre cible. En effet, vous 
serez alors plutot dans un cadre exploratoire. Pre- 
parez rapidement quelques scenarios de navigation 
et cela suffira amplement. En lisant ce chapitre, 
vous eviterez les erreurs les plus frequentes et dis- 
poserez ainsi d'un plan de test efficace. 



Methode 
Ecrire un plan de test pour coller au reel 

Votre test sert a simuler une situation de naviga- 
tion reelle sur votre site ? Alors vous devez donner 
a I'internaute des choses a faire. En effet, il est 
rare qu'il arrive sur un site par hasard, sans aucun 
objectif. Le principe d'un plan de test utilisateur 
est de le placer dans une situation realiste et done 
de lui donner des objectifs a atteindre. 
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Figure 11-6 

Un scenario de plan de test donne un objectif 

aux participants. Voici quel pourrait etre un 

objectif a tester sur le site A Vendre A Louer, 

site de petites annonces immobilieres. 

Source : www.avendrealouer.fr 
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« Nous voulons tester I'efficacite de la barre de navigation » 

Lorsqu'on prepare des tests utilisateurs, on peut etre tente d'ecrire le 
plan de test en fonction de nos propres interrogations de concepteur sur 
I'efficacite de l'interface (ou celles de nos clients). Or ce n'est pas la 
bonne maniere de fonctionner. 

Tester un element d'interface en particulier 

Si vous voulez tester des choses en particulier (par exemple, vous n'etes 
pas certain que les utilisateurs remarqueront la liste deroulante qui leur 
permet de passer d'un sous-site a un autre), vous devez les integrer dans 
un scenario. Autrement dit, vous allez inventer quelque chose a faire 
faire a votre participant et cette action ne sera qu'un pretexte pour 
observer comment il va se debrouiller pour y parvenir. Faites alors en 
sorte que l'element a tester constitue pour lui la maniere optimale 
d'arriver a F objectif que vous lui avez assigne. Vous pourrez alors evaluer 
sa visibilite, mais aussi son adequation a la tache. 

Attention cependant avec les objectifs issus de vos propres interroga- 
tions de concepteur, plutot que des taches que vos internautes doivent 
realiser sur votre site. Testez ce genre de choses uniquement si elles peu- 
vent s'integrer dans un scenario de navigation dicte par les objectifs de 
vos personas. Autrement dit, ne testez pas pour tester, pour vous faire 
plaisir ou justifier une decision de conception somme toute mineure. 
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Figure 11-7 

Problematique de depart : on souhaite tester la visi- 
bility et I'utilisabilite de la liste deroulante Chan- 
ger de secteur du siteAsmodee. Plus precise- 
ment, on souhaite tester I'acces au secteur Jeux de 
societe a partir du secteur Jeux de roles. 
Source : www.asmodee.com 




SCENARIO 
"IMA&INONS SUE TU VEUILLES VOIR SI CE JEU EST A 
N<5UVEAU DISPONIBLE, CAZ IL. N'ETAIT PLUS EN STOCK 
rSUAND TU AS VCULU L'ACHETEB LE MOIS OEENIEE." 



Figure 11-8 

Le scenario sert de moyen pour tester la problemati- 
que de depart. II consiste a trouver un pretexte pour 
que I'internaute se trouve dans une situation dont la 
resolution optimale passe par le recours a la liste 
deroulante Changer de secteur. 



Si vous considerez qu'il est vraiment important de tester une decision 
concernant un element d'interface, elle doit forcement etre liee a la reali- 
sation d'une des taches principales de votre persona. Vous devriez done 
« comme par hasard » voir cet element d'interface intervener lors de la 
creation de vos scenarios. Si 1' element d'interface pose probleme, vous 
vous en rendrez vite compte lors du test. 

Pour resumer, vous ne devez pas partir de l'interface pour creer vos scena- 
rios, mais des missions affectees a vos personas (comme evoque au chapitre 4). 

Excluez les tests comparatifs 

Vous n'arrivez pas a choisir entre une barre de navigation horizontale et 
une verticale ? Desolee de vous decevoir, mais le test utilisateur n'est pas 
le lieu pour en decider. 
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Prenez votre courage a deux mains, faites un choix et testez-le. S'il fonc- 
tionne, tant mieux, rien a redire, votre decision sera prise. S'il pose pro- 
bleme a vos utilisateurs, vous devrez alors le modifier, mais la cause n'en 
est probablement pas le sens de la navigation (ce sera plus surement le 
rubriquage, les libelles ou l'ordre de presentation de ces items, etc.). 
Dans le cas des deux barres de navigation, il est d'ailleurs probable que, 
si elles sont toutes les deux bien concues, elles fonctionneront toutes les 
deux de maniere plus ou moins identique pour aider vos participants a se 
deplacer dans le site. 

J'imagine que vous vous demandez Et pourquoi je ne ferais pas un test 
comparatif? D'abord parce que cela necessite un protocole methodolo- 
gique tres lourd a mettre en place. Une donnee non negligeable de ce 
protocole est le nombre de participants necessaires, inenvisageable sur la 
plupart des projets web, meme les plus gros. Vous devez d'abord former 
deux groupes de participants (Fun sera confronte a la navigation hori- 
zontale, l'autre a la navigation verticale), chacun de ces groupes devant 
comporter un grand nombre de participants. Je vous passe les details 
mais, assurement, personne ne pratiquant de l'ergonomie de terrain avec 
des problematiques de production web n'est capable de conduire ce type 
d'etude et surtout n'a interet a le faire. 

Nous venons de prendre l'exemple d'un comparatif entre deux types de 
barre de navigation, mais ces remarques sont valables pour n'importe quel 
test qui voudrait evaluer l'efficacite d'une solution par rapport a une autre. 

Ne perdez pas votre temps et votre budget sur ce type de tests. Profitez- 
en plutot pour mener des sessions de test de maniere repetee, afin 
d'affiner votre travail. 

Realisme des scenarios 

Rappelez-vous comme il est important que les participants jouent le jeu. 
Plus votre plan de test sera realiste, plus il permettra d'impliquer vos 
participants. Vous devez done tout faire pour rendre vos scenarios les 
plus credibles possibles. 

Bien sur, un plan de test est par essence artificiel. Ajoutons a cela que 
Ton passe en general environ une heure avec un participant sur un site 
Internet : souvent, cette duree depasse largement le temps de visite 
moyen du site. Enfin, si chacun des scenarios en soi est plausible, leur 
juxtaposition collective a peu de chances d'arriver dans la vie reelle. Tou- 
tefois, vous devez essayer d'optimiser le realisme de votre plan de test. 

Tout d'abord, ce realisme peut etre porte par tout ce qui viendra nourrir 
le scenario. II est exclu que vous demandiez simplement a vos partici- 
pants de trouver un canape ou de telecharger une sonnerie de telephone. 
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Vous devez broder, fabriquer une histoire autour de ce scenario. Autre- 
ment dit, ecrivez veritablement des scenarios et non une liste de taches. 
Ne demandez pas simplement a votre participant de faire quelque chose, 
mais fournissez lui une raison de le faire, un contexte qui explique pour- 
quoi il aurait envie de cela, etc. Ainsi, vous pouvez expliquer a vos parti- 
cipants qu'ils veulent changer de canape parce que le leur est trop vieux, 
ou changer de sonnerie parce que celles fournies par defaut dans leur 
telephone ne leur plaisent pas. 

Votre plan de test general sera aussi plus realiste si vous agencez vos ques- 
tions de maniere a rendre fluide le deroulement de la session de test. Pour 
ce faire, vous pouvez hierarchiser vos scenarios en creant des meta-scena- 
rios, englobant une serie de questions successives. Servez-vous des actions 
que le participant vient d'effectuer pour introduire les scenarios suivants. 

Par exemple, sur un site d'e-commerce, profitez du travail sur un produit en 
particulier pour tester les pages et fonctionnalites qui vous interessent. 

Tableau 11-2 Camif.fr, Meta-scenario Canape 



Taches 


Page ou fonctionnalite testee 


Chercher un canape 


Navigation dans le catalogue produits 


Regarder s'il convient 


Contenu de la page produit 


Le selectionner pour I'acheter 
dans un coloris donne 


Fonctionnalites d'achat de la page produit 


Voir s'il existe un fauteuil assorti 


Navigation dans une ligne de produits 


Supprimer le canape de la commande 


Fonction de suppression du panier 



Pour ajouter au realisme et tester jusqu'au bout, vous devez sortir du site et 
prevoir tout le materiel necessaire pour fabriquer une situation d'interac- 
tion qui frole le modele reel. Ainsi, si vos personas utilisent votre site en 
interaction avec d'autres supports (telephone portable, appareil photo, 
logiciel client, courrier papier, etc.), vous devez integrer ces elements dans 
votre plan de test. Meme si le but n'est pas d'analyser l'ergonomie de ces 
supports, vous serez ainsi plus proche des situations d'usage reelles et vous 
pourrez faire des decouvertes interessantes de ce point de vue. 

Par exemple, pour faire tester le site de la Camif aux clients existants, il 
est primordial de faire intervenir l'objet catalogue. Une grande partie des 
clients de la Camif se sert en effet du catalogue comme preparation de 
l'achat sur Internet. Autrement dit, le catalogue papier sert a choisir et le 
site a valider ce choix avant d'y passer la commande. Un des scenarios 
est done le suivant : 



405 



Figure 11-9 

L'utilisation du catalogue papier permet de 

rendre le scenario de test plus realiste et plus 

proche des usages reels des clients Camif 

participant au test. 




scenario 
i "0n va ima&inee sue v0us avez eepeee une television 
dams le catalogue, voila, c'est celle-la\ et v0us 
v0udeiez la c0mmandee dieectement sue inteenet." 
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De meme, si vous faites acheter des produits en ligne, fournissez aux 
participants le moyen de paiement qu'utiliserait votre persona. Dans le 
cas d'un paiement par carte bancaire, vous avez plusieurs options : 

• Vous avez la possibilite de controler les commandes : fournissez aux 
participants n'importe quelle carte bancaire et faites annuler les com- 
mandes realisees pour les besoins du test. 

• Vous avez un compte bancaire de test. Dans ce cas, fabriquez une 
fausse carte bancaire indiquant les informations necessaires au paie- 
ment truque. 

• Vous n'avez pas de compte bancaire de test et ne controlez pas les 
commandes : fournissez aux participants votre propre carte bancaire 
ou celle de votre client. 

Attention, meme si cela pourrait rendre le test realiste, ne demandez 
jamais aux participants de regler leurs achats avec leur propre carte de 
paiement. Vous entreriez de maniere trop poussee dans leur sphere per- 
sonnelle et mettriez en jeu des problematiques trop lourdes a gerer au 
regard des benefices que vous en tireriez. Le test doit reellement s'atta- 
cher a faire « comme si ». 

Plus rarement, l'intervention de materiel exterieur au site peut unique- 
ment servir a donner de la consistance au plan de test, a augmenter le 
realisme et done l'implication des participants. Prenons l'exemple du 
scenario suivant : 



Figure 11-10 

En meme temps que Ton lit le scenario au 

participant, on lui montre le ticket de cinema, 

afin d'augmenter son niveau d'implication 

dans le test. 
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Le fait de presenter un ticket de cinema au participant est tout a fait 
inutile d'un point de vue strictement methodologique (le ticket 
n'apporte rien par rapport a une presentation orale ou ecrite du titre du 
film). Cependant, il permet au participant de croire davantage a la situa- 
tion et de s'impliquer dans le scenario comme si, effectivement, il etait 
alle a cette seance de cinema. 

Attention : a l'inverse d'un materiel important d'un point de vue metho- 
dologique (comme le catalogue de la Camif ou un courrier papier avec 
des codes d'acces a un service web), ce type de support du plan de test 
n'est qu'un bonus. Vous ne devez done pas passer trop de temps a y refle- 
chir ou a les preparer. 

Souplesse des scenarios 

Un scenario de test peut etre ouvert ou ferme selon qu'il laisse plus ou 
moins de liberte aux participants. Le scenario le plus ouvert que Ton puisse 
imaginer sur un site web est ce que Ton appelle la navigation libre : le parti- 
cipant navigue sur le site sans autre consigne que l'explorer. II est rare qu'un 
plan de test integre de la navigation libre. Lorsque e'est le cas, e'est seule- 
ment pour une duree limitee ou en fin de session, s'il reste du temps. 

La navigation libre apporte souvent beaucoup plus de donnees subjec- 
tives que d'observations objectives dont on peut tenir compte. En effet, 
puisque la navigation est libre, vos participants empruntent tous des che- 
mins differents, ne visitent pas les memes pages, ne font pas les memes 
choses. II est done difficile de reperer des tendances comportementales 
ou des erreurs qui se repetent pour tous les participants. Cependant, la 
navigation libre presente l'avantage de sortir du cadre ferme qu'offre le 
plan de test classique : elle vous permet done de vous ouvrir a des choses 
auxquelles vous n'aviez pas pense mais qui peuvent etre importantes. 

La plupart des scenarios d'un plan de test sont done des scenarios plus 
fermes que de la pure navigation libre. Toutefois, leur degre de fermeture 
peut etre plus ou moins avance. Voyez done les deux exemples suivants : 



Methodologie 
Plusieurs plans pour plusieurs cibles 

Dans le cas oil votre cible est tres heterogene en 
termes de taches et de connaissances anterieures 
concernant le site, vous pouvez tout a fait imaginer 
de concevoir autant de plans de test que de types 
de cibles. Veillez a ne pas surexploiter cette possibi- 
lity car elle necessitera d'augmenter le nombre de 
participants pour chacune des modalites du plan de 
test, sous peine de n'avoir qu'un ou deux partici- 
pants confronted au meme plan de test. 



VOUS VOUL.EZ FAIEE UNE EESEEVATION 
P0UB VCUS SENDEE |5 MABSEILUE 
PAETICIPEE A UN SE/AINAIE6. IL. 
C0MMENCE A 9H30 LE ZO JUIM- 




Figure 11-11 

Dans le cadre d'un test pour une agence de voyages en 
ligne, le scenario 1 est plus ouvert que le 2, car il donne plus 
de liberte aux participants. 
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METHODOLOGIE Commencer simple 

L'ordre des scenarios dans le plan de test est 
important pour le realisme general du plan de test, 
mais pas seulement. Par exemple, le premier sce- 
nario est critique pour mettre vos participants a 
I'aise et leur faire prendre confiance en eux. Com- 
mencez toujours par une tache extremement 
simple, que tous les participants reussiront. lis 
seront ainsi plus detendus pour la suite du test. 



Dans le premier cas, seul le produit et le pays de destination sont speci- 
fies. Dans le second cas, on n'indique pas le produit (le participant peut 
par exemple avoir besoin de reserver un vol + un hotel pour arriver a 
l'heure le matin, ou un vol + une voiture), mais on specifie la ville de des- 
tination, la date et l'heure d'arrivee souhaitee en ville. 

Pour impliquer vos participants, essayez de leur donner le plus de liberte 
possible sans que cela affecte vos observations. Par exemple, si vous 
cherchez a tester un processus applique de maniere identique sur toute 
une ligne de produits et que vous disposez d'un site en ligne, laissez 
votre participant choisir le produit qu'il prefere. 

La souplesse du plan de test est souvent dictee par le support sur lequel 
on travaille. Sur un prototype semi-fonctionnel par exemple, vous ne 
developperez probablement que quelques acces produits et non tout le 
catalogue. Votre scenario doit done orienter les participants vers les pro- 
duits en question. 



Nombre de scenarios 

Le nombre de questions d'un plan de test n'est pas limite. Dans l'absolu, 
vous pouvez poser autant de questions que vous le souhaitez, dans la 
limite de la duree que vous vous etes fixee. 

Une des difficultes dans l'ecriture d'un plan de test est justement d'eva- 
luer combien de temps il occupera le participant. Partez du principe que 
vous n'aurez jamais un panel egal de ce point de vue. Selon leur niveau 
d'expertise et leur personnalite, vos participants mettront plus ou moins 
de temps a executer les scenarios. La duree reelle des tests differera done 
toujours en fonction des utilisateurs. 

Vous devez prevoir des questions ou scenarios optionnels, que vous gar- 
derez en reserve au cas ou vos participants ont accompli tous les scena- 
rios obligatoires et qu'il vous reste du temps pour leur proposer d'autres 
choses. II est en effet dommage de ne pas profiter de leur presence. 

Essayez de ne pas lancer vos tests sans avoir evalue la pertinence de votre 
plan en termes de duree, par exemple avec des personnes de votre equipe. 
Meme si cette mesure est purement indicative et ne vous donne qu'un ordre 
d'idee, elle pourra vous permettre de reajuster votre plan de test si vous etes 
completement en deca ou au-dela de la duree que vous aviez prevue. 
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Au-dela des taches... la comprehension du site 

Malgre la sur-representation de scenarios dans un plan de test, ce ne 
sont pas toujours ses seuls elements constitutifs. Par exemple, il est par- 
ticulierement interessant de faire debuter votre plan de test par des ques- 
tions sur la comprehension du site. Finalement, cela revient a simuler ce 
que fait un internaute inconsciemment (ou pas, si le site est vraiment 
mal concu) lorsqu'il arrive pour la premiere fois sur un site Internet. 
Vous pouvez enrober vos questions d'un contexte fictif d'utilisation, 
meme si elles ne correspondent pas reellement a une tache explicite de 
l'internaute. En voici un exemple sur le site d'OSEO : 



METHODOLOGIE D'abord sans cliquer... 

Les gens sont presses et veulent vous prouver 
qu'ils vont reussir a faire ce que vous leur 
demandez. Mais les questions concernant la com- 
prehension d'un site se posent necessairement au 
tout debut d'un test, lorsque vous arrivez pour la 
premiere fois sur la page d'accueil du site. II est 
done important de donner la consigne a votre par- 
ticipant d'essayer de vous repondre sans cliquer. 
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SCENAEIC 
"D'ABSED SANS ALUEE AIUL-BUBS, EN EE&AEDANT 
CETTE PEEMIEEE PA&E, P0UVEZ ME DIEE <3UI EST 
OSE0, ET CE SUE PE0P<3SE CE SITE ?" 



Figure 11-12 

Exemple de scenario de comprehension du site 
pour un test utilisateur sur le site d'OSEO. 
Source : www.oseo.fr 



Ce type de questions est sans pitie envers le site, puisqu'un internaute 
arrive rarement vierge de toute pre-conception envers un site web. En 
general, il y arrive parce qu'il veut trouver une information ou atteindre 
un objectif, et qu'il pense que le site en question va l'y aider (soit parce 
qu'il le connait, soit parce qu'on le lui a recommande, soit parce qu'il l'a 
trouve par un moteur de recherche ou en naviguant sur le Web). Toute- 
fois, vous pouvez partir du principe que, si vos participants comprennent 
qui vous etes et ce que vous faites sans beneficier de ce contexte, e'est que 
vous reussirez a couvrir toutes les situations possibles. 
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METHODOLOGIE Le test utilisateur peut aussi s'occuper de la maniere d'acceder au site 



Si vous etes assez implique dans le projet pour pouvoir 
emettre des recommandations sur I'accessibilite tech- 
nique du site, le test peut commencer avec un scenario 
tel que le suivant : « Imaginons que vous ayez note le 
nom de ce site sur votre calepin. Vous ne vous sou- 
venez plus ce que c'est mais si vous I'avez note, c'est 
que cela devait vous interesser. On va done y aller. » Ce 
type de mise en bouche va vous permettre de tester si 
vos participants se servent d'un moteur de recherche 
ou saisissent directement une URL et, si c'est le cas, de 
quelle maniere ils la saisissent. 

Vous pouvez aller encore plus loin en leur indiquant le 
nom du site de maniere orale, afin de tester la maniere 
dont ils I'orthographient ainsi que la syntaxe de I'URL 
qu'ils saisissent s'ils passent par la barre d'adresse (avec 
ou sans http, quelle extension au nom de domaine, etc.). 



<2N VA AUUSR SUE UN SITE D£NT 
UN AMI VOUS A PAEU£, (A 
S'APPEU-6 [ E6SEEVOIE J6UX ] 




Figure 11-13 L'animateur indique le nom du site a I'oral. 



En entendant ce nom oralement, les participants qui le 
rentrent directement dans la barre d'adresses peuvent 
I'ecrire de plusieurs manieres. Les alternatives les plus 
frequemment observees consistent a ecrire le www ou 
non, a ecrire jeux au singulier ou au pluriel, a mettre un 
tiret entre reservoir et jeu ou pas, a mettre un accent a 
reservoir ou pas, a terminer I'adresse par .fr ou .com, etc. 
Chacun de ces parametres ayant deux modalites, vous 
pouvez observer toutes les combinaisons possibles (par 
exemple : www.reservoirjeux.fr, reservoir-jeux.com, 
www.reservoirjeu.com...). Cette procedure peut vous 
conduire a des observations que vous n'aviez pas pre- 
vues et a engager une nouvelle politique d'achat de 
noms de domaines (avec ou sans s, avec ou sans tiret, 
avec une mauvaise orthographe tres f requente, etc.). 
Le meme type d'observations va etre realise avec les 
participants qui choisissent plutot le moteur de 
recherche : vous allez regarder les mots cles qu'ils saisis- 
sent, mais aussi les resultats qu'ils obtiennent, la facon 
dont ils y reagissent et ce qu'ils en comprennent. Ces 
observations vous permettent d'optimiser vos strate- 
gies de referencement (que ce soit d'un point de vue 
naturel ou payant). 

Se preoccuper de ce type de problematiques, c'est 
prendre en compte le cote serveur (on dit « server 
side ») de I'ergonomie, qui est essentiel. En effet, sans 
lui, vos internautes n'arriveront pas sur votre site, et il 
devient alors completement egal que ce dernier soit 
facile a utiliser ou non. Commencez par optimiser 
I'ergonomie de I'acces technique a votre site. 



Effets d'ordre et contrebalancements 

Lorsque vous realisez des tests sur plusieurs supports, vous devez operer 
des contrebalancements afin d'eviter des effets d'ordre. Meme si un test 
utilisateur de terrain ne permet pas de faire de statistiques, vous devez 
tout de meme controler tout ce que vous pouvez. 

Par exemple, si vous concevez un nouveau site de vente de vin en ligne et 
realisez des tests utilisateurs sur les sites de vos deux plus gros concurrents, 
vous devez presenter a la premiere partie de votre panel le site A puis le site 
B, et a la seconde partie de votre panel, le site B puis le site A (figure 11-14). 

De meme avec les tests melant evaluation du site actuellement en ligne 
et evaluation des maquettes ou prototypes de la seconde version. 
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Figure 11-14 Pour eviter d'observer des resultats dus a des effets d'ordre, la moitie de vos participants 
doit d'abord etre confronted au site A, puis au site B, et inversement pour I'autre moitie du panel. 

Les erreurs a eviter lors de I'ecriture du plan de test 

Un plan de test ne doit pas utiliser les memes mots que le site 

Vous devez absolument eviter d'utiliser des mots de votre site dans le 
plan de test. En effet, vous ne feriez que tester la rapidite de votre parti- 
cipant a scanner l'ecran, reperer le mot et agir en consequence. Forcez- 
vous done a utiliser des synonymes ou a creer des histoires vous evitant 
d'utiliser le mot en question. 
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Figure 11-15 

Pour tester le retour a la page d'accueil sur le 
site du Louvre, ne demandez pas aux partici- 
pants de revenir a la page d'accueil, mais a la 
premiere page, ou a la page sur laquelle ils 
sont arrives, etc. 
Source : www.louvre.fr 
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Figure 11-16 

Pour tester la fonctionnalite Envoyer a un ami sur le site de 
Voyageurs du Monde, ne demandez pas aux participants 
d'envoyer la fiche a un ami, mais dites-lui qu'il faut qu'ils envoient 
cette page a la personne qui va les accompagner pour savoir si 
elle trouve ce voyage interessant. 
Source : www.vdm.com 
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N'appliquez cependant pas ce conseil de maniere extreme. Bien sur, si 
vous demandez a vos participants d'acheter une machine a laver, vous 
pouvez difficilement l'appeler autrement. 

Dans la meme veine, si vous voulez tester l'utilite d'une fonction, ne 
dirigez pas les gens directement vers son utilisation en sous-entendant 
quelle existe. 

Un plan de test ne doit pas detainer les etapes permettant de realiser 
la tache. 

Ce que vous donnez a vos participants, c'est un objectif global. Par 
exemple, s'ils doivent acheter un disque, ne leur demandez pas de selec- 
tionner un disque qui leur plait, puis de l'aj outer au panier et enfin de le 
commander. Demandez leur simplement d'acheter un disque qui leur plait. 

Un plan de test ne doit pas etre un questionnaire 

Un plan de test est une serie de scenarios ou Ton demande aux partici- 
pants de « faire comme si ». C'est done tout a fait different d'une serie de 
questions ou Ton attendrait une reponse verbale. Meme si cette compo- 
sante verbale est importante pour comprendre le cheminement des par- 
ticipants, elle n'est interessante qu'en accompagnement de l'etude d'une 
interaction reelle. Autrement dit, c'est a vous d'avoir le sens critique. Ne 
demandez pas a vos participants d'avoir un avis sur l'ergonomie du site, 
mais observez leur navigation au sein des pages. 

Un plan de test doit tester les missions du persona et non vos propres 
objectifs 

Meme si ce conseil est difficile a appliquer, sachez insister pour que le 
plan de test evalue reellement les objectifs de vos personas sur votre site. 
Votre plan de test n'a pas pour but de faire passer les participants par 
telle ou telle page, mais doit evaluer si le site permet aux internautes 
d'accomplir leurs taches facilement et rapidement. Rappelez-vous tou- 
jours que les scenarios que vous imaginez ne sont qu'un outil pour sup- 
porter cette evaluation. 

Prenons un exemple. Si vous travaillez sur le site d'un theatre, vous avez 
probablement envie de tester l'utilisabilite des fiches spectacles. Mais 
cela ne suffit pas. Que viennent faire vos internautes sur des fiches spec- 
tacles, quelles sont les informations qui les interessent ? lis veulent voir 
les dates ou se joue la piece, le prix des places, les acteurs, la duree de la 
piece, etc. Fabriquez done une histoire pour justifier qu'ils aient besoin 
de consulter la fiche en question. Par exemple : 
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Figure 11-17 

Deux scenarios peuvent permettre de tester 
I'acces et I'utilisabilite des fiches spectacles 
sur le site du theatre de I'Odeon : « Vous avez 
reserve des places pour une piece de theatre 
vendredi prochain, ca s'appelle Homme sans 
but, et vous voulez savoir combien de temps 
dure la piece pour decider si vous dTnez avant 
d'aller au theatre. » / « On vous a conseille 
d'aller voir une piece qui s'appelle Homme 
sans but, vous voulez voir si elle se joue 
encore. » 
Source : www.theatre-odeon.fr 



L'objectif pour le participant est bien de connaitre la duree d'une piece, 
ses dates ou ses acteurs, et non d' « acceder a une fiche spectacle ». 

Evitez aussi de faire tester des choses qui ne serviront pas, ou peu. Ainsi, 
il est dommage de centrer un plan de test sur 1' analyse de pages que per- 
sonne ne viendra jamais visiter ou sur des fonctionnalites qui ont ete 
developpees uniquement pour satisfaire les equipes internes. Le temps 
du test utilisateur est trop precieux pour le gaspiller sur autre chose que 
l'essentiel, a savoir les missions prioritaires de vos personas. 

Un plan de test ne s'ecrit pas seul 

Le plan de test doit etre concu de maniere collaborative et valide par les 
acteurs impliques dans le projet. Les equipes marketing souhaitent sou- 
vent ajouter quelques questions subjectives dans le plan de test ou le 
post-questionnaire. De plus, elles ont souvent une connaissance plus 
approfondie que vous de la cible et de ses besoins. Leurs remarques vous 
permettront done d'adapter votre plan de test. 

La lecture d'un plan de test est rapide et genere souvent de nombreuses 
remarques de la part des equipes projets. Cette etape permet ainsi de 
faire participer des gens qui n'ont pas le temps de faire plus, mais don- 
nent ainsi leur avis sur la pertinence du plan de test. 
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En outre, si vous omettez de travailler avec les personnes concernees ou 
de faire valider le plan de test, vous risquez de voir ce dernier remis en 
cause pendant son deroulement avec les utilisateurs, voire apres, ce qui 
pose evidemment quelques soucis... 

Les objectifs d'utilisabilite 

Un plan de test est souvent accompagne d'objectifs d'utilisabilite. En 
d'autres termes, en face de votre liste de scenarios, vous avez des objec- 
tifs. Ceux-ci doivent pouvoir evaluer tous les aspects de l'utilisabilite : 
efficacite, efficience et satisfaction des internautes. Lors du test utilisa- 
teur, vous pouvez evaluer les criteres suivants : 

• succes a realiser la tache ; 

• temps de realisation ; 

• nombre de clics necessaires ; 

• nombre d'erreurs ; 

• niveau de comprehension de l'interface ; 

• satisfaction des utilisateurs au niveau global (sur tout le site) et local 
(sur une partie du site). 

Pour construire des objectifs, vous devez affecter a chacun de ces criteres 
des echelles d'acceptabilite, definissant les seuils planchers au-dessus 
desquels vous souhaitez situer la qualite d'utilisation de votre site. Cela 
necessite de vous poser des questions du type : 

• Quel est le nombre d'erreurs au-dela duquel vous considerez la tache 
comme trop complexe ? 

• Quel est la duree maximale au-dela de laquelle vous considerez la 
tache comme trop longue a effectuer ? 

• Quel est le nombre de clics maximal acceptable pour trouver une 
information situee a un niveau donne ? 

• Quel est le nombre de clics maximal acceptable pour accomplir une 
action donnee ? 

• Quel pourcentage d'utilisateurs ne reussissant pas a accomplir une 
action pouvez-vous accepter ? Attention, la tendance intuitive est de 
toujours dire %, mais ce faisant vous risquez de prendre en compte 
des utilisateurs trop extremes, qui vous feraient modifier l'interface 
alors quelle fonctionne pour la quasi-totalite des participants que 
vous aurez rencontres. 

Les objectifs d'utilisabilite peuvent etre de deux types : 

• Absolus (90 % des participants doivent pouvoir trouver l'adresse e-mail 
du service editorial en moins de 15 secondes). 
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• Relatifs (90 % des participants doivent pouvoir trouver l'adresse e- 
mail du service editorial plus rapidement que sur l'ancien site). 

Chaque scenario d'un plan de test fait l'objet de plusieurs objectifs d'uti- 
lisabilite. En voici quelques exemples : 

Tableau 11-3 Exemples d'objectifs d'utilisabilite 



Site et scenario 


Objectif d'utilisabilite 


Reservoir Jeux 

http://www.reservoir-jeux.com 

Scenario : « Vous voulez acheter un jeu pour I'anniversaire d'un de vos 

amis qui adore jouer » 


95 % des participants doivent reussir a creer un compte. 

La creation d'un compte ne doit pas prendre plus de 5 minutes. 


Marmiton 

http://www.marmiton.org 

Scenario : « Votre grand-mere vous a donne une tonne d'abricots et 

vous voulez savoir ce que vous pourriez en faire » 


100 % des participants doivent reussir a trouver une recette appropriee. 
Les participants qui cliquent sur le lien Recherche Avancee doivent tous 
utiliser I'onglet Par Ingredients. 


Mairie de Paris 

http://www.paris.fr 

Scenario : « Vous habitez rue Doudeauville dans le 18eme arrondisse- 

ment et vous voulez voir l'adresse de la bibliotheque la plus proche de 

chez vous » 


90 % des participants doivent comprendre qu'il n'y a pas qu'une seule 
bibliotheque dans le 18eme arrondissement. 



Ecrire des objectifs d'utilisabilite est une des choses les plus difficiles 
dans la mise en place d'un test utilisateur, car il est difficile de trouver 
une reference de qualite ergonomique (en termes de nombre d'erreurs, 
de duree de realisation d'une tache, etc.) sur l'ancienne interface, une 
concurrente ou une comparable. 

En ce qui concerne la duree de realisation des taches, le temps que met 
un expert a realiser la tache peut etre un bon repere pour decider d'un 
objectif d'utilisabilite realiste. Le temps moyen de realisation des taches 
est aussi interessant. 

Si c'est la premiere fois que vous effectuez un test utilisateur sur votre 
site, ces objectifs seront plutot arbitraires car vous n'aurez pas de refe- 
rence a laquelle comparer les resultats que vous obtiendrez. Obligez- 
vous quand meme a rediger des objectifs d'utilisabilite, meme s'ils ne 
sont pas tres precis. 

Ces objectifs sont importants car ils permettent de savoir si les observa- 
tions realisees lors du test sont un signe de bonne ou de mauvaise qualite 
d'un point de vue ergonomique. Ils permettent de confronter les resul- 
tats obtenus a ceux souhaites. 

Prenons l'exemple du site de SFR Music et imaginons que, lors de votre 
test, un utilisateur mette 1 minute 30 pour acheter une sonnerie de tele- 
phone portable. Comment savoir si acheter une sonnerie en 1 minute 30 
est un score acceptable ? Mettons que votre objectif d'utilisabilite soitun 



415 



temps moyen d'achat inferieur a celui de l'ancien site. Si les internautes 
mettaient environ 3 minutes sur le site precedent, vous deciderez proba- 
blement que vous avez atteint votre objectif d'utilisabilite. 



Pendant le test utilisateur 

La veritable mise en oeuvre d'un test utilisateur reside dans la realisation 
des tests. Dans la pratique, vous allez rencontrer chacun des participants 
et les soumettre au plan de test que vous avez prepare. Quelques recom- 
mandations sont capitales pour que votre test soit reussi. 



Un participant, et qui d'autre ? 



Qui doit etre charge du test ? 

Pour tout projet de test utilisateur, vous devez designer un charge de 
test. Dans l'ideal, c'est a lui qu'incombe la responsabilite de gerer le test 
de A a Z, de s'approprier la demande, d'y associer la solution la plus 
fiable d'un point de vue methodologique, de preparer le plan de test et 
l'echantillonnage, eventuellement le support, et enfin de conduire les 
tests et d'en tirer des conclusions. 

La question se pose de savoir s'il est recommande que la personne conduisant 
le test soit aussi celle qui a concu l'interface. Autrement dit, devez-vous etre 
charge de test sur un site que vous avez concu et dont vous etes responsable ? 
Cette decision doit etre prise en fonction des elements suivants : 

Tableau 11-4 Externaliser ou internaliser les tests utilisateurs ? 





Charge de test en interne 


Charge de test en externe 


Avantages 


Un charge de test en interne peut dispo- 
ser de plus de credibilite en termes 
d'expertise projet ou metier. 


Un charge de test en externe peut disposer de plus de credibilite en termes d'exper- 
tise utilisateur. 


Lorsqu'on connait le site et la maniere 
dont il fonctionne, il est beaucoup plus 
facile de penser aux solutions et a leurs 
implementations possibles. On ne perd 
pas son temps a imaginer des solutions 
infaisables. 


Etre independant de la conception du site observe a pour consequence une plus 
grande impartialite. 


Penser a des solutions infaisables et les presenter permet de les rendre plus faisa- 
bles, en les installant dans le cerveau des personnes concemees par le projet. 


Ne pas avoir conscience de tous les details du projet permet d'avoir un regard neuf 
sur les problematiques de taches et d'interface, et de trouver ainsi plus facilement 
des solutions nouvelles. 


Ne pas connaTtre precisement la cible du site permet de s'ouvrir I'esprit a des utili- 
sations du site ou du systeme qui n'existent pas dans le modele de taches prevu. 
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Tableau 11-4 Externaliser ou internaliser les tests utilisateurs ? (suite) 





Charge de test en interne 


Charge de test en externe 


Inconvenients 


On connait trap les contraintes intrinse- 
ques au projet et les justifications de cha- 
cune des solutions d'interface pour 
pouvoir les analyser de maniere verita- 
blement objective. 


Lorsqu'on n'est pas integre au projet au long cours, on n'a pas toutes les des en 
main, on ne comprend pas forcement dans les details I'ensemble du site et ce peut 
etre problematique. 


Lorsqu'on est plonge dans le projet, on 
peut avoir des conceptions erronees des 
missions des visiteurs du site (on est per- 
suade que la plupart des visiteurs vien- 
nent faire telle ou telle chose et on se 
concentre sur cette croyance en oubliant 
d'autres comportements tout aussi 
importants). 


Lorsqu'on ne connait pas parfaitement le projet, on peut avoir des conceptions 
erronees des missions des visiteurs du site (on pense intuitivement qu'ils viennent 
pour telle ou telle raison, effectuer telle ou telle tache, alors que cela ne correspond 
pas a la realite). 


Lorsqu'on intervient en externe sur un domaine d'activite tres pointu ou expert, il 
peut etre difficile d'etre performant sur tous les aspects methodologiques de la con- 
duite de test, notamment la preparation du plan de test, la relance des participants 
et ('interpretation des resultats. 



Notez que les inconvenients du charge de test externe peuvent etre com- 
penses par une collaboration etroite entre l'intervenant et les responsables 
du projet en interne. L'inverse est difflcilement envisageable, puisqu'il 
necessite un point de vue externe et que cela revient a faire appel a un 
intervenant exterieur. 

II est important de souligner que n'importe qui peut conduire des tests uti- 
lisateur et qu'ils peuvent etre effectues en interne. En effet, c'est en repetant 
les tests utilisateurs que vous arriverez a un niveau de qualite ergonomique 
irreprochable et il est souvent plus facile de multiplier les tests utilisateurs 
lorsque ceux-ci sont effectues en interne. Le cout de l'etude se restreint 
alors uniquement a votre temps et la remuneration des participants. 

Notez que vous pouvez tout a fait conduire des tests de bas niveau de 
maniere reguliere dans la vie du projet, et conner la realisation de tests 
plus avances a un intervenant externe. Cette demarche vous permettra 
de profiter des avantages de chacune des situations et d'obtenir ainsi une 
qualite ergonomique irreprochable. 

Se pose aussi la question de savoir si la personne chargee du test sera 
celle qui implementera les recommandations d'un point de vue concret, 
qui en tirera des specifications fonctionnelles. La, sans hesiter, il est pre- 
ferable que ce soit la meme personne ou, a defaut, quelqu'un de la meme 
equipe, ayant par exemple assiste aux tests. 

Enfm, dans la mesure du possible, je vous recommande de conner le role 
d'animateur des tests a une seule personne et ce pour plusieurs raisons. 
Tout d'abord, cette personne ne sera veritablement experte de ce test que 
si c'est elle qui a rencontre tous les participants. Le partage de connais- 
sances ne fonctionne pas encore parfaitement et, jusqu'a ce que nous 
trouvions la solution a la problematique de la transmission de pensee, 



METHODOLOGIE Je peux conduire des tests 

moi-meme ? A quoi sert-il alors de faire 

appel a un expert ? 

Le test utilisateur est une methode tres flexible, 
multi-forme, qui peut etre appliquee de maniere 
plus ou moins pointue et donnera selon le niveau 
d'expertise du charge de tests, des resultats plus 
ou moins precis et fiables. 
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Revelation Le test utilisateur est 
aussi une methode experte 

Nous posons I'hypothese que la confrontation 
repetee de I'animateur a une interface lui permet 
d'augmenter la precision de son cerveau-radar au fil 
des confrontations. II semble en effet que cette 
repetition permette de s'affranchir des problemes 
deja vus, et d'ouvrir I'esprit a la decouverte de pro- 
blemes plus discrets. L' expert serait done en mesure 
de decouvrir des defauts ergonomiques qu'il n'avait 
pas reperes avant grace a une session de test. 



nous devons avoir conscience de ces trous dans les collaborations. Autre- 
ment dit, une seule personne rencontrant 20 participants, e'est mieux 
que 2 en rencontrant 10 chacun. 

Cette recommandation n'est pas uniquement liee aux donnees d'obser- 
vations que Ton recolte grace a la participation des internautes. Elle pro- 
vient aussi du fait que, si je rencontre 20 participants, je vais etre 
confrontee 20 fois a une navigation sur le site et que j'y verrais plus de 
choses qu'en n'y etant confrontee que 10 fois (malheureusement, on ne 
peut pas ajouter 10 + 10 lorsque les animateurs ne sont pas la meme per- 
sonne). En fait, il semble que ces navigations repetees permettent a 
l'expert de deceler des defauts d'interface au-dela de ce que lui montre 
l'internaute. Le test utilisateur serait done plus qu'une methode partici- 
pative et permettrait d'affiner son regard d'expert a mesure des sessions. 



VOCABULAIRE 
Animation, moderation ou facilitation 

Pour evoquer I'activite d'animation, il arrive aussi 
de parler de moderation ou de facilitation. Vous 
trouverez done indifferemment ces trois termes 
dans les differentes ressources qui presentent la 
methodologie du test utilisateur. 



Le role de I'animateur 

L'animateur est la personne qui accompagne le participant pendant tout 
le test. Dans l'ideal, e'est aussi lui qui l'accueille, le remercie et le rac- 
compagne a la porte. Un animateur doit avoir de grandes qualites 
humaines, ou au moins s'y obliger pendant la duree du test. En effet, 
cela conditionne de maniere critique le deroulement du test et ce que 
Ton va « obtenir » du participant. 

La question de la conduite a tenir par I'animateur du test souleve de 
nombreux debats. De mon point de vue, e'est a vous de faire du test uti- 
lisateur une methode objective, et non a votre participant d'en subir les 
consequences. Au-dela de son ressenti, vous risquez de rendre la situa- 
tion encore plus artincielle quelle ne Test deja et done de vous eloigner 
encore d'une situation d'utilisation reelle ou l'internaute est forcement 
plus detendu puisque personne ne l'observe. 

Lors d'un test utilisateur, les influences environnementales ne peuvent ni 
ne doivent etre eliminees a tout prix. Ce choix est lie a l'interet de conduire 
des tests sur le terrain pour verifier l'interface avec de vrais utilisateurs, dans 
une situation realiste. Personne ne consulte un site web dans un environne- 
ment epure, sans bruit, sans intervention de l'exterieur, sans perturbation 
possible. En tant qu'animateur, vous fakes done partie de l'environnement. 

Essayez de garder la situation de test informelle et de mettre l'utilisateur 
dans une ambiance opposee a celle d'un test. Ses reponses et reactions 
seront plus spontanees si vous etes dans une discussion, une conversa- 
tion, que s'il s'agit d'un entretien. Vous devez done etre assis a cote de lui 
et faire du test un veritable echange (et non lui donner des instructions 
ou repondre a ses questions au micro, a partir d'une piece attenante d'ou 
vous le surveillez). 
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Un test utilisateur est une situation de communication. Puisque le cer- 
veau des participants est enferme dans une boite cranienne, vous devez 
utiliser tous les moyens dont vous disposez pour y acceder. Si votre role 
d'animation se cantonne a donner des papiers de scenarios aux partici- 
pants en evitant a tout prix de leur parler, vous aurez peu de chance de 
penetrer dans leur mental. 




Figure 11-18 

Le test utilisateur a pour vocation de vous 
apprendre ce qui se passe dans la tete de vos 
participants, afin de pouvoir y adapter Inter- 
face. Si vous n'interagissez pas avec lui, il vous 
sera difficile d'acceder a ses processus 
mentaux. Vous pouvez considerer de maniere 
symbolique que ce qu'il vous renvoie verbale- 
ment et par ses actions sont autant de moyens 
pour creuser votre analyse. 



Etre proche de l'utilisateur c'est aussi pouvoir interagir avec lui. Une des 
regies d'un test utilisateur est de l'inciter a verbaliser ses impressions, 
commentaires, envies, objectifs. II semble difficile de croire qu'un utili- 
sateur seul dans une piece (qui de plus se sait filme et enregistre) pourra 
respecter cette consigne. II nest pas naturel de parler a des murs. 

Ceci etant dit, ne prenez pas ce que je viens de vous presenter comme 
une invitation a faire n'importe quoi et a parler a tort et a travers pen- 
dant la session de test. Le role d'animateur est un role tres paradoxal, qui 
necessite a la fois de faire semblant d'etre disponible et ouvert, tout en 
etant rigoureux et en se surveillant constamment. 

Vous n'etes que le receptacle de ce qui se passe lors du test. Votre role se 
limite a mettre votre participant a l'aise, a lui soumettre les scenarios 
successifs du plan de test et a etre la quand il en a besoin. Si vous etes 
seul, en parallele de cette composante d'interaction avec votre partici- 
pant, vous procedez a la collecte des donnees. Nous verrons par la suite 
les differentes formes que celle-ci peut prendre. 

Vous aurez beau essayer d'etre le plus neutre possible, vous avez une 
voix, une maniere de dire les choses, des comportements non verbaux, 
qui vous sont propres. Essayez done au maximum de garder le meme 



Citation Regarder et apprendre 

Si vous animez un test utilisateur, essayez de res- 
pecter ce que Keith Instone appelle le Watch and 
learn. 



419 



animateur pour tous les participants. Vous eviterez ainsi de biaiser les 
resultats observes par une variation du plan de test. En effet, en tant 
qu'observateur, vous faites partie du plan de test, en tout cas de la 
maniere dont il est presente. Nous verrons par la suite les avantages et 
inconvenients lies a la maniere de presenter le protocole de test (ecrite 
ou orale). 

Une derniere chose. Vous pouvez envisager de laisser vos participants 
seuls dans la salle de test lorsque vous evaluez des produits destines a 
etre utilises en groupe. Le participant ne sera alors pas seul dans la piece 
puisqu'il interagira avec d'autres utilisateurs. Ce peut etre le cas, par 
exemple, si vous testez un jeu video multi-joueurs. A l'inverse, pour un 
test utilisateur sur un site web, nous vous deconseillons de laisser le par- 
ticipant seul pour aller l'observer derriere une vitre sans tain ou via une 
camera. S'asseoir a cote de l'utilisateur, legerement en retrait, a large- 
ment montre ses avantages pour ameliorer la quantite ainsi que la qualite 
des donnees obtenues lors du test. 



Recommandation Big brother is watching you 

Si des personnes observent le test dans une piece 
adjacente a la salle de test a travers un miroir sans 
tain, informez-en votre participant. Vous pouvez le 
presenter comme etant une possibility pour eux 
d'assister au test sans vous deranger. 



Oum Le materiel d'observation 

Des logiciels existent pour retransmettre la session 
de test via un reseau (voir par exemple Morae de 
Techsmith, que vous presentons par la suite). 
Cependant, un simple switch video vous permettra 
de retransmettre le flux video sur un autre ecran, 
sans necessiter de bande passante. Pour voir le 
participant a Taction, une simple vitre sans tain 
suffira done. II existe des films autocollants a 
poser sur une vitre, permettant d'obtenir un 
resultat quasi-equivalent a un veritable miroir sans 
tain. 



Les observateurs 

II existe differents types d'observateurs, des observateurs qui font le 
meme metier que vous, ou font partie de votre equipe, et vos clients, si 
vous travaillez pour une entreprise externe. 

Interagir avec l'utilisateur est en soi une activite a plein temps, qui 
demande beaucoup de ressources. Le plan de test doit etre respecte, on 
ne doit pas oublier d'etapes, reagir de facon pertinente aux actions et 
reactions de l'utilisateur, veiller a ne pas l'influencer. . . 

II est done plus facile de travailler a deux ou a plusieurs : une personne 
conduisant le test avec l'utilisateur et d'autres analysant et recueillant les 
reponses au fur et mesure (observation, ecoute, prise de notes...). Dans 
ce cas, il est non seulement envisageable, mais recommande, que les 
observateurs agissent depuis une autre piece. 

De meme si votre client souhaite assister aux tests, et aussi le directeur 
du marketing, et son assistante, et le chef de produit, le responsable du 
site, la chef de projet et sa stagiaire, etc. En fait, tout intervenant qui ne 
vient que pour observer et ha pas besoin d'interagir avec le participant 
doit observer le test a partir d'une piece attenante, de laquelle ils pour- 
ront y assister sans perturber son deroulement. Au pire, ils peuvent se 
placer discretement derriere le participant et l'animateur. 
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Combien de temps dure un test utilisateur ? 

La duree dun test est une composante tres importante. Etant donne que 
la situation de test est artificielle, les internautes que vous recevez vont 
probablement passer plus de temps sur le site etudie qu'ils ne l'auraient 
fait chez eux. 

Le seuil que Ton se fixe est un plafond de temps raisonnable, au-dela 
duquel la situation de test deviendrait trop biaisee. 

Le facteur le plus important qui risque d'influer sur le test tient aux 
capacites attentionnelles de vos participants. Naviguer sur le Web est 
une activite tres gourmande en termes de ressources mentales. 

Lors d'une situation de test utilisateur, vous demandez a vos participants 
d'accomplir plusieurs activites simultanees : ils doivent a la fois se concen- 
trer pour essayer d'atteindre les objectifs que vous leur donnez, et parler a 
voix haute pour vous expliquer ce qu'ils sont en train de faire. En outre, la 
plupart du temps, ils decouvrent un nouveau site qu'il leur faut s'approprier. 

Si les premieres dizaines de minutes du test peuvent les amuser, vous 
verrez que vos participants commenceront a se lasser au bout d'un cer- 
tain temps. A partir d'une certaine duree, il est en effet difficile de creer 
de nouvelles situations de test plausibles dans la vie reelle. II faut savoir 
que la navigation sur un site Internet genere des phenomenes d'appren- 
tissage internes a ce site. Plus les internautes y naviguent, plus ils aug- 
mentent leur niveau d'expertise sur ce site. 

Vous pouvez vous permettre de pousser jusqu'a lh30 voire 2h si votre test 
est compose de plusieurs parties. C'est notamment le cas lorsque vous pro- 
fitez de la venue des internautes pour leur proposer a la fois un tri de cartes 
et un test utilisateur. Ces activites sont suffisamment distinctes en termes 
d'implication pour pouvoir etre menees l'une a la suite de 1' autre et ainsi 
augmenter la duree totale de 1' etude. C'est d'autant plus envisageable si 
vous effectuez un tri de cartes physique. En effet, vous separez ainsi la ses- 
sion totale en deux parties, une navigation sur ecran et un exercice sur 
table. Etant donne que ces deux activites appellent des ressources atten- 
tionnelles differentes, vous pouvez garder votre participant plus longtemps 
que pour un test utilisateur uniquement sur ecran. 

La duree du test est normalement un parametre qui sera fixe bien avant 
le deroulement reel des tests. Plus precisement, vous decidez en amont 
de la duree totale du test pour en informer vos participants, et construisez 
votre plan de test en fonction de cette limite temporelle. 



METHODOLOGIE Et si je travaille sur 
une application web ? 

Si vous menez votre test utilisateur sur une applica- 
tion web, il peut etre interessant d'accompagner les 
participants pendant plusieurs heures, puisque cela 
correspond a de veritables situations d'utilisation. 
Cependant, si votre plan de test est bien concu, vous 
devez reussir a traiter des problematiques essen- 
tielles dans la premiere heure d'utilisation de I'outil. 
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Le deroulement d'un test : etapes et recommandations 



Dans ce livre Les tests utilisateurs a distance 

A la fin de cette partie, nous evoquerons la proble- 
matique des tests a distance, qui sont toutefois tel- 
lement specifiques que certaines recommandations 
pour le test classique n'y sont pas applicables. 



Methodologie 
Les tests utilisateurs sur des intranets 

Pour augmenter le niveau d'ecologie de votre 
situation de test, si vous travaillez sur un intranet 
ou une application professionnelle, essayez d'aller 
conduire vos tests sur le lieu de travail habituel des 
gens. Vous beneficiez ainsi de toutes leurs habi- 
tudes dans cet environnement (contexte materiel 
et social, outils de travail, outils de communica- 
tion, interactions avec leurs collegues, etc.). 



Avant d'aborder les etapes classiques du deroulement d'un test utilisa- 
teur, rappelez-vous que le test de terrain n'a pas l'ambition d'etre une 
methode de recherche fondamentale : son objectif est surtout de se rap- 
procher d'une situation reelle d'interaction. 

La mise en place du test doit done vous permettre d'obtenir ce qu'on 
appelle une situation ecologique, qui ressemble a l'environnement 
naturel de navigation sur le Web. Dans l'ideal, on voudrait se trans- 
former en petite souris pour aller espionner les gens chez eux lorsqu'ils 
naviguent sur le Web. Bien sur, on n'atteint jamais cet objectif parce que 
d'autres necessites methodologiques plus importantes viennent le con- 
trarier (par exemple, le fait que les gens doivent verbaliser ce qu'ils font, 
ou que Ton souhaite tester une tache en particulier). 

Avec ce rappel en tete, vous comprendrez mieux les remarques de cette 
partie concernant la necessite de faire du test une veritable rencontre entre 
vous et l'utilisateur. La situation de test est, par essence, une situation pro- 
voquee et vous devez tout faire pour reduire les defauts quelle induit. 

Avant d'evoquer ce qui se passera lorsque vos participants vont arriver, 
notez qu'il est important de preparer minutieusement la salle de test (ou 
le bureau, la salle de reunion ou vous allez passer le test). Mettez au 
point tous les outils dont vous avez besoin, fakes des tests de bon fonc- 
tionnement, prevoyez votre support de notes, reglez la lumiere, le son, 
adaptez la resolution de l'ecran comme prevu, effacez toute trace d'utili- 
sation precedente, etc. S'il vous reste une minute pour preparer du cafe, 
vous serez definitivement pret. 



Pre-questionnaire et decharges 

Apres avoir accueilli votre participant, vous allez lui soumettre ce que Ton 
appelle un pre-questionnaire. Generalement, celui-ci a deux objectifs, 
d'une part, recolter des donnees et, d'autre part, mettre le participant a 
l'aise et vous habituer Fun a l'autre avant de passer aux choses serieuses. II 
vous permet aussi de vous interesser a la personne que vous avez en face de 
vous. 

Cette entree en matiere peut egalement etre le moyen de mettre au point 
les aspects administratifs, en demandant par exemple l'accord de filmer 
votre participant. Faites lui signer un document qui stipule explicite- 
ment cet accord et les droits d'exploitation afferents. 

Le coeur du pre-questionnaire consiste a recueillir des informations de 
base sur les participants, qui ils sont et leurs usages du Web, voire de la 
marque pour laquelle vous travaillez et de ses concurrents. 
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Une partie de ce pre-questionnaire peut etre administree lors du recrute- 
ment du panel de participants, afin de selectionner des participants 
representatifs de la cible finale sur la base de leurs reponses. Que ce soit 
en amont ou lors du test, vous pouvez avoir besoin de recueillir les types 
d'informations suivants : 

• metier ; 

• niveau d'expertise web objectif (depuis quand le participant utilise-t- 
il Internet de maniere reguliere, combien d'heures navigue-t-il sur 
Internet par jour ou par semaine, etc.) ; 

• appreciation de ses capacites sur le Web, plus subjectif (est-ce que le 
participant se sent a l'aise avec Internet) ; 

• activites sur le Web/sites web preferes ; 

• niveau d'expertise informatique general ; 

• niveau d'expertise dans un domaine connexe, en fonction de votre 
projet (par exemple : expertise mobile, TV, jeux video, application 
logicielle, etc.). 

Vous devez concevoir ce questionnaire en fonction des caracteristiques de 
votre site. S'il s'agit d'un projet de refonte, il peut servir a recueillir des 
informations liees a l'experience du site ou de l'application, ou a 1' expertise 
relative a la tache principale supportee par le site (par exemple, pour un 
site d'e-commerce, experience de l'achat en ligne). Dans le cas d'une 
application professionnelle, le pre-questionnaire sera oriente metier. 

Certains experts aiment a remunerer les participants lors de cette pre- 
miere phase. lis expliquent que cela leur semble motiver les participants 
et permet d'insister sur le fait qu'ils sont d'une aide veritable, que leur 
opinion et leur participation sont si importantes qu'elles valent de 
l'argent (en general, une somme assez consequente pour l'effort requis). 
Cependant, c'est une position methodologique tout a fait personnelle. 
Un nombre tout aussi important, voire plus, de specialistes preferent 
quant a eux remunerer a la fin de la session de test. Nous sommes de 
ceux-la. A vous de choisir done, selon votre propre preference. 

Mise en situation : les points des 

La realisation du test a proprement parler doit etre precedee d'une pre- 
sentation de la consigne generale et, eventuellement, du produit. C'est 
ce que Ton appelle la mise en situation. 

Familiarisation avec la procedure 

Avant de commencer, vous allez expliquer a votre participant ce qu'est 
un test utilisateur et ce que vous attendez de lui. Comme dans la phase 
de recrutement, ne prononcez pas le mot test. En presentant la finalite 
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d'un test, insistez sur le fait que c'est bien l'interface qui est evaluee et 
non sa performance en tant que personne. Soyez humble : dites-lui que 
l'interface a surement des erreurs et qu'il s'agit justement de comprendre 
ses defauts pour la corriger. 



Figure 11-19 

Etape de familiarisation avec la procedure du 
test utilisateur. 



ON VA TEAVAIt,LEE SUE UN SITE INTEENET POUE 
VOIE SI L.ES SENS (-E COMPBENNENT BIEN, 
E^USSISSENT A FAIEE CE SU'ILS VEULENT, ETC- 
CA NOUS PEEMET DE VOIE Oil SONT LES DEFAUTS 
DU SITE ET COMMENT ON POUEEAIT 1,'AMSuOEEE- 




Point de vue utilisateur Mais qu'est-ce que 
je vais bien pouvoir faire ? 

Les participants a un test utilisateur sont parfois 
inquiets de ne pas savoir quoi faire sur le site, de 
ne pas savoir I'utiliser, etc. La familiarisation avec 
la procedure doit les rassurer sur le fait que c'est 
vous qui dirigez la session et que vous attendez 
seulement d'eux qu'ils repondent a ce que vous 
leur demandez de faire. 



Point de vue utilisateur Je ne sais pas 
si je vais etre capable... 

Les participants a un test utilisateur expriment 
souvent leur inquietude de ne pas etre assez per- 
formant, de ne pas bien faire, etc. Si malgre vos 
explications de depart, ils emettent des remarques 
de ce style, expliquez-leur que s'ils ne reusissent 
pas, c'est que le site est mal fait. 



Figure 11-20 

Les participants a un test utilisateur doivent 

comprendre qu'ils doivent vous restituer a 

I'oral tout ce qu'ils pensent. 



Indiquez a votre participant que dans l'heure qui va suivre, vous allez jouer 
a « faire comme si » et que vous allez lui demander de faire plusieurs 
choses sur le site en imaginant des situations fictives. Cela suffit normale- 
ment a lui faire comprendre que Ton n'attend pas d'initiatives poussees de 
sa part et que Ton est la pour le guider dans l'exploration du site. 

Un point important : vos participants doivent bien comprendre que les 
scenarios proposes sont fictifs et ne correspondent done pas forcement a 
leurs besoins ou envies reels. Tout au long du test, vous reinstallerez ce 
principe en commencant chacun de vos scenarios par les mots 
« Imaginons que... », « On va imaginer que... », etc. 

Pensez en outre a rassurer votre participant : il ne risque pas de vous 
blesser parce que ce nest pas vous qui avez concu la nouvelle interface 
(meme si c'est en partie faux). En effet, cela change considerablement le 
comportement des participants et leur disposition a se laisser aller aux 
remarques qu'ils ont envie de faire. Ils auront moins de scrupules a etre 
sinceres s'ils savent que vous n'avez rien a voir avec la conception du site 
avec lequel ils sont en train de hitter. Si votre grandeur d'ame vous interdit 
d'aller jusque la, dites simplement que ce n'est pas votre site et cela suffira ! 

Enfin, un des points essentiels pour familiariser vos participants avec la 
procedure est de leur donner la consigne de penser a voix haute. 
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II lui faut vraiment comprendre qu'il doit vous dire tout ce qui lui passe 
par la tete, pourquoi il clique a tel ou tel endroit, ce qu'il ne comprend 
pas, la ou il hesite, etc. Si vous ne lui donnez pas cette consigne tres 
explicitement et en insistant, il risque de ne pas la prendre sufflsamment 
au serieux alors quelle est le point d'orgue de la familiarisation avec la 
procedure. En parler en dernier, c'est done aussi un moyen de beneficier 
de l'effet de recence en memoire : juste apres, vous demarrez avec la 
decouverte du site et le plongez dans des mises en situation ou il devra 
vous expliquer tout ce qu'il fait. 

Familiarisation avec le produit 

Si c'est pertinent, on peut introduire une phase de familiarisation avec le 
produit. Cela peut consister en une simple presentation verbale de 
l'application (voila notre application, a quoi elle ressemble), de son but 
ou de son theme (ce a quoi elle sert globalement. ..) ou en une decou- 
verte guidee de l'interface. 

Lorsque Ton decide d'inclure cette phase de familiarisation, on doit 
cependant veiller a ce que cela n'entre pas en competition avec la stra- 
tegic du test : s'il est evident que l'utilisateur ne doit avoir aucune con- 
frontation avec l'interface avant de commencer le test, on ne preparera 
pas de telle phase. 






Vocabulaire Recence ? 



L'effet de recence renvoie au fait que Ton se rap- J, 
pelle plus facilement les derniers elements d'une rt 
liste lorsque Ton doit la memoriser. 



Realisation des scenarios 

La plus grande partie d'un test consiste a faire realiser les scenarios par vos 
participants. Si votre plan de test est bien construit et que vous avez un 
peu l'habitude de conduire des tests, cela fonctionnera comme sur des rou- 
lettes. Si c'est la premiere fois, pas d'inquietude, il en faut bien une et nous 
sommes tous passes par la ! Surtout, ne reculez pas juste parce que vous 
n'avez jamais anime de test utilisateur. C'est vraiment quelque chose 
d'accessible a tous et il est primordial que tous les acteurs du Web qui ont 
assez de latitude pour cela conduisent des tests. Void done quelques con- 
seils et precautions pour que votre test se passe le mieux possible. 

Comment presenter le plan de test ? 

Vous pouvez confronter le participant au plan de test de maniere orale 
ou ecrite. Chacun de ces protocoles presente des avantages et des incon- 
venients. Le choix d'un protocole ecrit ou oral est souvent lie aux prefe- 
rences individuelles de l'animateur et a ses convictions concernant la 
maniere ideale de conduire un test. Notre preference va largement au 
protocole oral, mais vous devez decider du protocole que vous allez 
employer en connaissance de cause : 
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Tableau 11-5 Avantages des protocoles ecrit et oral 





Avantages 


Protocole ecrit 


Rigueur de la presentation : tous les participants ont strictement les memes consignes. 

Le participant peut se reporter a la consigne s'il en eprouve le besoin. 

Puisqu'il est moins susceptible d'entramer des questions, I'animateur repondra moins aux questions, et aura done moins de 

risque d'influencer le participant. 


Protocole oral 


Caractere humain de la presentation : grace a la dimension sociale, le protocole semble plus realiste et le participant hesite 

moins a poser des questions s'il a mal compris. Le scenario a done moins de risque d'etre mal interprets. 

Toujours du fait de la dimension sociale, le protocole oral semble mettre I'utilisateur plus a I'aise que le protocole ecrit, et 

semble plus impliquant. 

Permet de tester tout ce qui touche a I'orthographe des mots. 



Point de vue utilisateur 
Je me sens vraiment idiot, la... 

Si au cours du test votre participant eprouve des dif- 
ficulty et finit pas vous dire « Vous devez penser 
que je suis debile », ou autre auto-flagellation, ras- 
surez-les comme au debut du test, en disant que ce 
qu'ils ont fait ou essaye parait tout a fait logique et 
que e'est done le site qui est mal concu. 



Les inconvenients du protocole oral sont les pendants des avantages 
relatifs au protocole ecrit (et inversement). Cependant, si on respecte les 
regies de base de la conduite de tests, on peut gommer les inconvenients 
du protocole oral. Tout d'abord, un animateur rigoureux et bien entrame 
pourra presenter les scenarios de maniere toujours identique (d'ou 
l'importance d'avoir un seul animateur consacre a un projet de tests). De 
plus, lorsqu'il repond a des questions, ce n'est qu'en utilisant les memes 
mots-cles que le scenario, en le reformulant tres legerement. Souvent, 
redire la meme chose suffit pour que les participants soient rassures 
d'avoir bien compris le scenario. 

Attention : s'il est destine a etre presente a l'oral, le protocole doit etre 
redige en langage parle, avec tous les mots de liaison que vous utilisez 
d 'habitude quand vous parlez aux gens. Sinon, vous risquez de ne pas pou- 
voir dire le protocole de maniere exacte et done, de ne pas le presenter 
exactement de la meme maniere a tous les participants. Parlez leur norma- 
lement et non de maniere trop distanciee, arm de detendre l'atmosphere et 
de pouvoir repliquer la meme chose avec tous les utilisateurs. Le contre- 
exemple a eviter a tout prix, e'est le langage « questionnaire ». 

Enfin, il est important de savoir presenter le plan de test pas a pas. De ce 
point de vue, le protocole oral a encore l'avantage, puisqu'il permet 
d'etre tres flexible et d'intervenir pile au moment ou vous sentez que le 
participant a termine l'etape precedente. 

La bonne maniere de prendre des notes 

La collecte des donnees lors d'un test utilisateur prend souvent la forme de 
notes, assorties ou non d'enregistrements video. Si vous etes seul a con- 
duire le test, vous devrez prendre des notes pendant que vous l'animez. 

II est important de decider prealablement ce que vous allez prendre en 
compte, ce que vous voulez relever, ce a quoi vous devez faire attention 
pour le noter au moment opportun. Pour chacun des moments du test, 
notez tout ce qui se passe, les comportements verbaux et non verbaux de 
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l'internaute, son cheminement dans l'interface et le comportement de 
l'interface. Vous verrez avec l'experience que Ton a souvent besoin 
d'associer a ces observations des notes d'expert (de type «J'ai repere 
quelque chose d'important, cela n'a rien a voir avec ce que mon partici- 
pant est en train de faire, mais je le note afin de m'en souvenir et d'y 
remedier par la suite »). 

On prend done des notes pendant le deroulement de la session concer- 
nant ce que le participant dit, ce qu'il fait et ce qui se passe a l'ecran. Ces 
constats objectifs sont souvent assortis d'analyses sur le vif. II est difficile 
de savoir bien prendre des notes pendant un test utilisateur. Void quel- 
ques recommandations : 

• Preparez un support de notes ou les scenarios du plan de test seront 
entrecoupes d'espaces vierges pour la prise de notes fibres. En face 
d'un scenario, vous pouvez en outre reserver un espace ou vous 
coderez des parametres tels que la reussite ou l'echec a la tache, le 
debut et la fin de la tache, etc. Vous pouvez vous fabriquer un petit 
cahier par participant : la premiere page peut etre constitute par son 
nom ou son code, les date et heure du rendez-vous, ses coordonnees 
telephoniques pour le joindre en cas de souci ; la seconde page, par le 
pre-questionnaire. Viennent ensuite les espaces reserves aux notes 
pendant le deroulement du test, puis le post-questionnaire. 

• Prenez des notes meme si vous enregistrez la session en video. Vous 
donnerez ainsi l'impression au participant d'etre reellement engage 
dans ce qui se passe et vous vous protegerez contre un eventuel pro- 
bleme d'enregistrement. 

• Ne vous concentrez pas sur la prise de notes. Cette activite doit etre 
de l'ordre du reflexe et vous devez apprendre a partager votre atten- 
tion. II faut savoir prendre des notes tout en continuant a regarder ce 
qui se passe a l'ecran et en restant disponible pour interagir avec le 
participant. 

• Prevenez votre participant que vous allez prendre des notes. Ce peut 
aussi etre une explication justifiant l'enregistrement video de la ses- 
sion (« Je vais essayer de tout noter, mais si j'oublie quelque chose je 
pourrais toujours me reporter a la video »). 

Comment relancer en cas de deviation ou d'echec ? 

Une des plus grandes difficultes dans l'animation de tests utilisateurs est de 
savoir relancer le participant lorsque e'est necessaire. Vous devez relancer 
votre participant s'il devie du scenario que vous lui avez propose. 

Lors d'un test utilisateur, les participants sont amenes a buter sur cer- 
taines taches, a ne pas trouver ce qu'ils cherchent ou a echouer a accom- 
plir ce qu'ils souhaitent. II est alors tout a fait normal et humain d'avoir 
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envie de les aider, mais abstenez-vous en ! Cela fausserait toute une 
partie du test. Bien sur, lorsque vous sentez que vos participants baissent 
les bras et sont sur le point d'abandonner (voire s'ils vous disent qu'ils 
abandonnent), guidez-les de maniere progressive. Void un exemple des 
differents types de relance que vous pouvez mettre en place. 

Le contexte est le suivant : nos internautes sont sur le site d'OSEO et 
nous voulons tester s'ils trouvent facilement l'outil de recherche d'aides 
et soutiens publics correspondant precisement a leur projet. Cet outil se 
trouve dans le sous-menu Services en ligne d'un projet d'entrepreneur 
(par exemple, Crier son entreprise ou Reprendre et Transmettre). 



Figure 11-21 

Sur I'ancienne version du site d'OSEO, I'acces a 

l'outil de recherche des aides et soutiens 

publics se trouve dans le sous-menu Services 

en ligne. Les entrees du sous-menu ne sont 

affichees que lorsque I'internaute se trouve 

dans la rubrique Services en ligne. 

Source : www.oseo.fr 
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Scenario de base : on dit au participant « Imaginons que vous voulez 
savoir s'il existe des aides de l'Etat ou des regions pour vous aider a 
financer votre societe. Pouvez-vous regarder quelles sont precisement les 
aides qui conviennent pour votre entreprise ? ». 

• Premier niveau de relance : on repete le scenario en le reformulant et 
on mentionne le mot « aides publiques ». 

• Second niveau de relance : on affirme que sur le site, quelque part, il 
existe un endroit qui permet de trouver ce genre d'information. 

• Troisieme niveau de relance (a ce stade, il est parfois deja trop tard en 
termes ergonomiques : on a eventuellement constate que le participant 
a echoue parce qu'il dit qu'il ne trouve pas, que 9a n'existe pas, qu'il ne 
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voit vraiment pas oil 9a peut etre). On indique au participant que ce 
que Ton cherche est vraiment considere comme un outil en ligne (au 
besoin, on peut aussi parler d'outil interactif, notamment lorsque les 
participants s'arretent sur des listes d'aides tres generiques). 

• Le dernier niveau de relance est progressif et consiste a le guider petit 
a petit vers le menu de navigation gauche dans la rubrique concernee 
(Services en ligne), selon l'endroit ou il se trouve. II est important 
que, meme a ce niveau, le participant ait l'impression de trouver par 
lui-meme (ou trouve effectivement par lui meme), meme s'il est evi- 
demment conscient que vous l'avez aide. C'est important pour lui, 
mais aussi pour vous, car vous pourrez ainsi mieux analyser sa reac- 
tion lors de la confrontation avec l'element maudit. 

II existe en outre d'autres types de relance, qui sont formulees en temps reel 
en fonction d'erreurs de vos participants. Notamment, s'ils pensent avoir 
trouve la page en question (« Ca y est, c'est 5a hein, oui, je crois ? ») et vous 
demandent done d'acquiescer, vous devez a la fois leur dire que ce n'est pas 
exactement ce que Ton cherchait et leur repeter le scenario. Comme on l'a 
vu precedemment, redire les choses (parfois meme les repeter exactement 
de la meme maniere) suffit pour que vos participants comprennent qu'ils 
faisaient fausse route et se remettent dans le droit chemin. 

Post-questionnaire et debriefing 

Apres le test en lui-meme, ne laissez pas votre participant partir tout de 
suite. Ce moment est en effet ideal pour recueillir son avis sur le derou- 
lement du test. Un post-questionnaire a chaud permet ainsi de recueillir 
des donnees globales sur le deroulement des tests et notamment le res- 
senti subjectif. II fournit aussi l'occasion d'expliquer certaines phases du 
test, par exemple des choses que vous avez du tenir secretes ou que vous 
havez pas pu lui expliquer pendant le test parce que cela aurait influence 
sa maniere de realiser les scenarios. 

La derniere etape consiste a remercier chaleureusement votre participant 
et a le remunerer (si vous ne l'avez pas deja fait au tout debut du test !). 

Si c'est la premiere fois que vous le voyez, demandez-lui si cela l'inte- 
resse de participer a d'autres etudes de ce type ; indiquez-lui que ce ne 
sera probablement pas avant quelques mois, mais que cela vous aiderait 
beaucoup d'avoir son aide de temps en temps. Pensez a notre conseil du 
debut, selon lequel vous devez eviter de faire participer la meme per- 
sonne trop souvent. Dans la pratique d'ailleurs, on voit extremement 
rarement les memes participants, du fait de l'extreme diversite des pro- 
jets web et done des cibles. II peut cependant etre interessant, si vous 
travaillez toujours sur le meme site, de re-inviter les memes personnes 
une seconde fois, en prenant en compte ce parametre dans votre analyse. 



Methodologie 
Digressions autorisees sous controle 

Si vous avez le temps, vous pouvez laisser le parti- 
cipant divaguer et se balader dans le site, meme 
s'il a devie du scenario. Cela peut vous permettre 
de nouvelles observations. Profitez done de sa 
venue, meme si cela sort du cadre plus controle. 
Et, dans I'absolu, c'est exactement ce qui se passe 
dans la realite du Web. Pourquoi pas, done, mais 
attention : seulement si vous avez du temps. En 
effet, cette navigation en dehors du plan de test 
ne doit pas se faire au detriment de la realisation 
des autres scenarios. 
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Post-test 

Non, ce n'est pas fini ! Vous avez encore un peu de travail apres le test. 
De toutes facons, pensez a garder un temps de battement entre deux 
participants, ne serait-ce que pour reprendre votre souffle, aerer la salle 
de test, tout remettre en ordre, etc. 

A ce moment-la, votre tache essentielle consiste a remettre l'ordinateur a 
neuf, comme si le participant precedent n'etait jamais venu. Videz le 
cache du navigateur, 1'historique, les logins et/ou mots de passe enregis- 
tres par le systeme, remettez votre materiel d'enregistrement dans un 
etat pret a commencer une nouvelle session, etc. 

Cet intermede vous permettra aussi de gerer les eventuels retards et 
avances des participants, sans impacter les suivants. 

METHODOLOGIE Les tests a distance 

Vous pouvez realiser des tests a distance en proposant a vos participants 
de I'effectuer de chez eux, grace a un navigateur prevu pour enregistrer 
I'interaction. Cependant, il est difficile d'atteindre la meme qualite 
qu'avec un test utilisateur classique. 

En effet, un test utilisateur a pour objectif d'obtenir des donnees basees 
sur le comportement, et pas seulement de relever le comportement. Le 
probleme d'un test a distance est que Ton perd la moitie des donnees 
puisqu'il nous manque tout le contexte d'utilisation (par exemple : 
qu'est-ce qui explique qu'a ce moment precis, le participant s'est 
trompe ?). Meme si la personne est filmee a distance, vous n'obtiendrez 
pas la meme qualite de donnees qu'en face a face. Cependant, pour 
I'instant, aucune recherche n'a pu demontrer de difference notable 
entre le test utilisateur classique et le test a distance en termes de quan- 
tity de problemes detectes. 

La simple restitution des dies et d'un questionnaire informatique ne 
suffit absolument pas pour comprendre un raisonnement ou recueillir 
des appreciations. En allant plus loin, on ne collecte pas des apprecia- 
tions de la meme maniere en face a face, avec une interface sous les 
yeux, qu'en glissant un questionnaire dans une boTte aux lettres. 
Effectuer des tests utilisateurs a distance, e'est se couper de la dimen- 
sion sociale du test utilisateur. A distance, on fait davantage du test 
d'usage, de I'analyse statistique, quantitative, que lors d'un test utilisa- 
teur a proprement parler. C'est interessant, comme le sont les statisti- 
ques de visite d'un site, mais incomparable avec un test utilisateur 
classique. 

Le test a distance est done problematique en termes de qualite des don- 
nees recueillies. Ainsi, ce type de test est a privilegier si vous avez besoin 
de donnees quantitatives et de faire passer un large panel de partici- 
pants. Cela ne peut cependant suffire pour optimiser de maniere fine 
I'ergonomie d'un site. 



430 



Le materiel d'enregistrement 

Selon le type de test que vous mettez en oeuvre, le materiel d'enregistre- 
ment peut etre tees varie. Deux grandes families de methodes pour enre- 
gistrer le deroulement d'un test se degagent : 

• Les tests ou le materiel d'enregistrement se resume a un carnet de 
notes permettant de coucher sur le papier, en temps reel, ce qui se 
passe lors du test. 

• Les tests ou l'enregistrement est supporte par un ou des logiciels. Ces 
derniers permettent d'enregistrer, soit uniquement l'ecran, soit 
l'ensemble de la situation de test (c'est-a-dire ecran, son, vue utilisa- 
teur, voire parcours de l'oeil). Void une liste des quelques logiciels les 
plus utilises pour l'enregistrement de l'ecran lors de tests utilisateurs : 

Tableau 11-6 Les logiciels d'enregistrement de videos ecrans 



Logiciel 


Prix 


Systeme 


Caracteristiques 


Hypercam (Hyperionics) 
http://fr.hyperionics.com/hc/ 
(a coupler avec un micro si vous 
souhaitez enregistrer la voix) 


30$ 


PC 


- enregistre l'ecran et le son ; 

- mise en valeur des dies souris ; 

- la sortie video est automatique (en .avi) ; 

- version d'essai avec watermark. 


Camtasia (Techsmith) 

http://www.techsmith.fr/produits/ 

camtasia 

(a coupler avec un micro si vous 

souhaitez enregistrer la voix) 


300$ 


PC 


- enregistre l'ecran et le son ; 

- mise en valeur des dies souris ; 

- options avancees d'edition et de montage video (ajout de titres, commen- 
taires, horodatage, dessin sur les videos, etc.) ; 

- la sortie video est automatique, et peut etre effectuee dans plusieurs for- 
mats video ; 

- version d'essai 30 jours. 


IshowU (Shinywhitebox ) 
http://www.shinywhitebox.com 
(a coupler avec un micro si vous 
souhaitez enregistrer la voix) 


20$ 


Mac 


- enregistre l'ecran et le son ; 

- la sortie video est automatique (en Quicktime) ; 


Morae (Techsmith) 
http://www.techsmith.fr/produits/ 
morae 

(a coupler avec une webcam et un micro 
si vous souhaitez enregistrer vos partici- 
pants et leur voix) 


1400$ 


PC 


- enregistre l'ecran, le son et I'utilisateur ; 

- mise en valeur des dies souris ; 

- annotation et decoupage des tidies en temps reel ; 

- systeme de gestion et d'analyse des tidies a posteriori ; 

- fonctionnalite pour realiser des post-questionnaires avec le SUS (System 
Usability Scale, Brooke, 1986) ; 

- fonctions de calcul et de restitution avancees sous forme de graphes ; 

- options avancees de creation, d'edition et de montage video ; 

- la sortie video doit etre generee a partir des fichiers de Morae (elle n'est 
pas automatique), mais peut etre effectuee dans plusieurs formats video. 



La collecte d'informations lors d'un test n'est pas forcement limitee a 
enregistrer la performance de I'utilisateur. On peut apprendre beaucoup 
en observant 1'utilisateur pendant l'interaction. Vous verrez ainsi de la 
confusion, de la frustration, de la satisfaction, de la surprise... La com- 
munication non verbale est parfois beaucoup plus parlante que les mots. 
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A SAVOIR Vous faut-il de I'eye-tracking ? 

Vous avez de I'argent ? Alors, vous pouvez y reflechir. 
Votre budget est limite ? Ne le gaspillez pas dans la 
mise en place d'eye-tracking et preferez mettre sur 
pied des tests plus frequents, avec plus de participants 
et plus controles. 

L' eye-tracking est une methode d'analyse du regard 
qui permet de decomposer I'exploration visuelle d'une 
page web en saccades (les parcours de I'oeil) et fixa- 
tions (la ou I'oeil se pose). En enregistrant ces mouve- 
ments oculaires, on espere analyser le comportement 
utilisateur entre les dies. 

Ainsi, Ton peut superposer ce qui est montre a I'ecran 
et comment I'oeil de I'internaute s'y interesse, dessi- 
nant des zones que Ton va appeler chaudes (les plus 
visitees) et d'autres plus froides (les moins visitees) : 




Figure 11-22 Heatmap issue d'une etude d'eye-tracking realisee 
par la societe londonienne Etre, sur le site d'Amazon. 
Sources : www.etre.com / www.amazon.co.uk 

Pour lire I'etude en entier et en couleurs : 
► http://www.etre.com/blog/2006/05/five_days_amazoncouk 
Sur notre illustration en noir et blanc, il est difficile de 
distinguer les zones les plus fixees mais, en couleurs, on 



presente les choses sous la forme d'une hierarchie de 
teintes allant du rouge (zones les plus fixees) au vert 
(zones moins fixees) puis au noir (zones non fixees). 
Ce type de resultat est assez spectaculaire, il donne 
I'impression au lecteur d'entrer dans la tete des inter- 
nautes et de disposer ainsi d'un formidable outil deva- 
luation de la pertinence utilisateur d'une page web. Or 
cette vision primaire de I'eye-tracking est dangereuse 
et une mauvaise utilisation peut entrainer des dom- 
mages sur le plan ergonomique. Avant tout, il faut 
bien comprendre que I'eye-tracking n'est en aucun cas 
un remede miracle. En aucun cas, il ne permet de 
repondre a des ambitions telles que « Nous allons 
observer ou nos internautes regardent afin de com- 
prendre ce qui ne fonctionne pas dans notre site ». En 
effet, I'analyse exclusive du parcours de I'oeil sur une 
page web peut generer des conclusions tres erronees. 
Ceci est du au travail d'interpretation consequent que 
requiert I'analyse des mouvements oculaires, et au fait 
que toute interpretation peut etre erronnee. Par 
exemple, il ne suffit pas de se dire : « Tiens, la rubrique 
« xxxx » a ete beaucoup fixee ». Comment savoir si 
e'est parce qu'elle est tres interessante ou parce que 
son titre est difficile a comprendre et que les inter- 
nautes, hesitant a cliquer dessus, I'ont done longue- 
ment regardee pour comprendre ce qui se cachait 
derriere ? Sans appliquer un protocole de test utilisa- 
teur classique, il vous sera difficile de valider votre 
interpretation. 

L'eye-tracking doit done plutot etre vu comme une 
technologie accompagnant la realisation d'un test utili- 
sateur que comme un outil benefique en soi. Une ses- 
sion d'eye-tracking doit notamment suivre une 
demarche methodologique stricte et avoir des 
objectifs : il ne s'agit pas seulement d'observer quelles 
zones d'interface les internautes ont tendance a fixer, 
mais plutot de valider certaines de vos presomptions : 
vous voulez vous assurer de la bonne visibilite de votre 
bouton « Ajouter au panier », de votre barre de naviga- 
tion secondaire... dans le cadre de la realisation de 
taches bien precises. 

Ce qui est vraiment interessant lorsque Ton rencontre 
des internautes, e'est d'essayer d'entrer dans la « boite 
noire » de leur cerveau, de comprendre comment ils 
raisonnent et recherchent des informations, etc. L'eye- 
tracking ne peut done que venir en renfort d'un proto- 
cole de test classique et en appui d'observations en 
temps reel. 
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Le plus interessant dans les etudes d'eye-tracking sur le Un des plus grands risques de I'eye-tracking reside dans 

Web est de pouvoir effectuer des analyses successives la generalisation des resultats. Ce n'est pas parce que 

apres avoir modifie un seul element de votre page. vous avez observe un certain parcours de I'ceil sur un 

Vous disposez ainsi d'un panel de mouvements ocu- site que ce dernier sera valable sur d'autres sites. Rap- 

laires de reference, auquel confronter vos nouvelles pelez-vous notre discussion du chapitre 2 concernant 

observations. Pour aller plus loin, vous pouvez lire cette I'idee recue relative au sens de lecture des pages web 

etude comparative de deux versions du site de Virgin, par les internautes. Nous sommes ici face aux memes 

toujours par Etre : problematiques. 

► http://www.etre.com/blog/2006/04/virgin_on_successful A propos, en francais, on dit oculometrie. 



Analyse des resultats et suite 
des evenements 

Apres avoir rencontre tous vos participants, vous devez avoir fait le plein 
d'informations passionnantes a analyser. II va falloir tirer de l'ensemble 
de vos observations des conclusions, ainsi que des recommandations sur 
les modifications dictees par ces conclusions. Le travail d'analyse se 
scinde done en deux etapes successives : 

• Reperer et selectionner les problemes rencontres par les utilisateurs. 

• Tenter d'y trouver des solutions afin d'optimiser la qualite d'utilisa- 
tion de votre site. 

Notez que, depuis le debut de ce chapitre, on ne parle que de defauts ; 
mais un test utilisateur permet aussi d'observer des choses positives, qui 
fonctionnent bien et ne doivent done pas etre remises en question. Bien 
que ces points positifs fassent partie de l'analyse et de la restitution, nous 
nous concentrons ici sur la maniere d'analyser les points negatifs 
observes en vue de les resoudre, parce que e'est la le cceur du sujet et le 
plus delicat a traiter. 

Tri et hierarchisation des observations 

Parmi l'ensemble des observations que vous avez accumulees, une partie 
des donnees ne sert objectivement a rien. Ces informations que vous lais- 
serez de cote font tout de meme partie du contexte du test et influencent 
votre vision subjective de l'aisance du participant pendant la realisation des 
taches. La premiere partie de votre travail consiste done a faire le tri, e'est- 
a-dire a selectionner les donnees qui vous paraissent pertinentes afin de 
determiner ce que vous allez prendre en compte, puis a les hierarchiser. 
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Anecdote Comportement et opinion 

J'ai le souvenir d'un test utilisateur tres difficile, 
pendant lequel la participante avait souffle, peste, 
me disant qu'elle ne continuait pas, ne voyait pas, 
qu'elle devait vraiment etre stupide, etc. Pendant 
cette session, elle met 12 minutes 30 pour trouver 
I'endroit susceptible de lui permettre de realiser 
I'objectif que je lui avais soumis. Au vu du type de 
site et de tache (une tache qui aurait du etre tres 
simple, sur un site tres grand public), ces 12 
minutes 30 sont une veritable catastrophe ergono- 
mique. Lors du debriefing, je lui demande si elle 
s'est sentie a I'aise sur le site. Elle repond alors 
tres detendue : « Oui, oui, plutot. Bon, parfois on a 
un peu I'impression de perdre du temps sur des 
trues qui paraissent simples, mais non non, ca a 
ete ». Cherchez I'erreur. 



Quelles sont les observations que vous allez prendre en compte ? 

Tout n'est done pas bon a prendre dans un test utilisateur. Vbus devez 
comprendre quel type d'observations retenir. Tout d'abord, soulignons 
que I'objectif du test est de reperer le maximum de defauts d'interface. 
L'interpretation de leur gravite est ensuite du ressort de 1' expert. Leur 
resolution dependra aussi des possibilites techniques, graphiques, ou 
encore des choix strategiques. A ce stade, votre objectif est done d'etablir 
une liste exhaustive des donnees interessantes. Le classement ne se fera 
que dans un second temps. De deux choses l'une : 

• Si vous avez du temps, vous enregistrez et re-analysez toute la session 
de test a posteriori. Ce que vous notez pendant la session de test sera 
retraite par la suite. 

• Si vous havez que peu de temps, l'analyse se fait en temps reel. Sur le 
vif, vous fakes le tri et ne notez que les choses essentielles, qui devront 
donner lieu a une reflexion ulterieure. Vous devez alors imperativement 
faire votre restitution juste apres la session de test, sous peine d'oublier 
certaines observations ou de leur accorder moins d'importance, alors 
qu'elles vous ont paru remarquables sur le moment. Plus vous trainez, 
plus vous serez indulgent envers l'interface. 

Parmi vos notes et enregistrements, vous disposez de plusieurs types de 
donnees a analyser. Ainsi, les indices que fournit l'internaute peuvent 
etre implicites (il hesite longtemps entre plusieurs liens, il parcourt toute 
la page avant de revenir sur un element qu'il avait deja observe, etc.) ou 
explicites (il vous explique qu'il n'est pas sur de ce qu'il fait, qu'il aimerait 
avoir plus d'informations, etc.). Essayez de relever les donnees suivantes 
pour chacun des scenarios que vous avez testes : 

• Erreurs (nombre et nature). A partir de l'analyse de la source des 
erreurs, vous pourrez modifier votre interface pour eviter qu'elles ne 
se reproduisent. 

• Duree de realisation des taches. Elle vous aidera a juger de la qualite 
ergonomique de votre interface, puisque mettre trop de temps releve 
du defaut ergonomique : ce n'est pas une erreur en soi, mais cela 
diminue l'efficience de votre internaute. Dans certaines applications, 
ce peut etre critique. Attention : en ce qui concerne la duree, les 
moyennes sont interessantes, mais les minima et maxima sont sou- 
vent les plus revelateurs. 

• Verbalisations explicites. Ce type de donnees est a la fois primordial 
et a traiter avec la plus grande vigilance. En particulier, faites bien la 
difference entre le declaratif et la realite. Ce que dit une personne et 
ce qu'elle fait n'ont parfois rien a voir et vous devez coupler ces deux 
dimensions afin d'obtenir une vision juste de ce qui s'est passe et de 
ce qu'en pense l'internaute. 
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• Comportements non verbaux 

Notez qu'une erreur d'un point de vue ergonomique peut n'etre meme 
pas percue consciemment par l'internaute. D'ou 1'importance de bien 
faire la difference entre dire et faire, et d'observer plutot que de 
demander d'emettre un jugement. 

Nous sommes tres resistants, tres permeables a l'erreur. On accepte 
beaucoup de choses de la part d'un ordinateur sous pretexte, soit qu'il 
nous rend service, soit que Ton ne peut pas faire autrement, soit que Ton 
n'imagine meme pas qu'il puisse en etre autrement. 

II faut vraiment que l'erreur soit grossiere pour quelle soit explicitement 
relevee par les internautes. On a davantage tendance a se remettre en 
cause en tant que personne, plutot que de rejeter la faute sur l'interface 
mal concue. D'ou 1'importance de bien souligner cet aspect a vos 
participants : si on n'y arrive pas, c'est que le site est mal fait. 

A ces donnees reelles, vous pouvez ajouter vos propres commentaires, 
vos impressions. Ainsi, il peut etre interessant de noter des remarques de 
type « il semble », meme si ces remarques ne sont que des hypotheses, 
des deductions faites a partir d'un ensemble d'indices epars et de don- 
nees non mesurables. Par exemple, suite a un test utilisateur sur le site 
d'OSEO, on peut faire le constat suivant : 



ojepy 



Pour f inancEf e+ 



pagner leU HME 



Le Pret i> la Creation d'EntrepdH. c'eil Jusqu'a 7004 turoi , 
dis-paniblsS lout de sufie. -Sans caulion parsonnalle ni gararclie. 



Votre projet : Creer une entreprise 



Moire Off re 


PiJI UIU& u~L" 


1 !■: L'f! 1 1. 1 1: U II 1 !j 


! li-l'ilvl'i | >l -1 1 j-:| 1 ■■ ' -i 


lUnnrtmfi on 


li|h.' 



Se lancer en toute securite 

Ann vcilm- pKijtil ill! nil; 



Conseil pratique 

, ,, CuiriritHiil fiiiaiim vulifl ci piLhhi 

OSLO wus aewn*naanE. Camrrcnt rowt* h 

rmnp Hi* a vns hi 

/an ■■: il E ■": : ■ dpi; Ri'iyitiiii; iln;; p;HN:n;in i:: i firnmninr; i*l dii-i; rrMi.iui 
LTaccompannerp.enl, nous intern* nuns, pour partager Ies nsqyes, sous lorn-ie de pre"s 
'-' I'- \j ii;>'ilii::, : i.- le:; curii <ii.i.; burn . mi"; r'l In 1 ; mliMvinilkim mi remit; pi:ifiii' ; ill"; 
ntaanisrnas de capnlal-ns.que. 

Ni:4h: : ; ■: ■ ■ j I i ■ - ■ : [i:i:,:ii: i ■ i^ j 1 1 ■: ■ r i . i ! r 1 1 ci;ii l.mli- ;i hrirur.-. ilium Nciuii v:irnri'/:; fhiitHiniiiii: 

maRra d'fleiMe du ccncourE national d'aids a 4a creation d*entrepi»Ee& da w^jarcme-j. lazzorrpaine 

lecnnolof eslnnwanfES. fjaaccwi* rfaiilram e» 



Service en ligne 



Off re a la une 

Pral Pji liiiiuaUf ■d'Ai'Kjr^au* 
CrHrdBi Gonctuns. raMsrableE a 
TMcivenMn BTun toiwla ri'danrpni]!!. liiinc 
maAiA rtc a»filn\-rtufir. nil it 'la (liinsmfc. 



Parole d.' entrepreneur 



KipuLilun 

.BC3UM •■Con RSUBEfllJi 

bemnrjE (hi ?am rfui PQE 



1 OSCO*n Draf ■ 



Ciittntten-niu* 



IL- S5/ABL-5 OU6 L-6S PAETI£IPANTS CCNSID5E6NT LA 

NAVI&ATI0N S6££>NDAIE6 6N &2U3NN6 06 6AUCH6 

COWAB 6TANT U6 MENU PEIN6IPAL. Du SITE. 



Figure 11-23 

Formulation d'une piste d'explication au vu du 
croisement de diverses observations lors de 
tests utilisateurs sur le site d'OSEO. 
Source : www.oseo.fr 
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OuilL Gerer les taches grace a Morae 

Pour vous aider dans I'analyse des donnees, le logiciel Morae de Techs- 
mith fournit des fonctionnalites de gestion des scenarios qui vous per- 
mettent de ponctuer vos enregistrements video d'indicateurs de debut 
et de fin de tache, de moment critique, etc. Ainsi, vous arrivez tres faci- 
lement a mesurer les durees d'execution des scenarios, le nombre 
d'erreurs, etc. 

Par la suite, vous pouvez produire des rapports de chacun de ces para- 
metres sous forme de graphes et de tableaux de donnees. Morae se 
positionne ainsi comme le logiciel le plus puissant pour gerer I'ensemble 
d'un test utilisateur, incluant son deroulement (enregistrement des ses- 
sions, fourniture de post-questionnaires informatises), son analyse et sa 
restitution. 



Ponderation des observations 

L'etape de ponderation consiste a prendre la liste de tous les problemes 
et a les classer par priorite et frequence. Vous repondrez done a des ques- 
tions de type : combien d'utilisateurs ont ete confrontes au probleme, 
quelles consequences a-t-il, est-il critique dans la realisation de la tache, 
etc. Si vous aviez construit des objectifs d'utilisabilite, e'est le moment 
des les mettre en regard des donnees observees. 

La necessite de faire une modification parait souvent evidente aux per- 
sonnes qui ont assiste aux tests, mais elle doit etre argumentee afin de 
convaincre I'ensemble de l'equipe projet et/ou votre client. 

L'analyse des observations permet de degager des tendances, des profils. 
On cherche des indices pour comprendre la reussite ou l'echec a une 
tache. Les meilleurs indices sont dans les patterns de comportements, 
dans les repetitions de remarques, de difficultes, d'observations, mais pas 
seulement. En effet, il existe deux types de donnees qui vous ameneront 
a prendre en consideration une observation particuliere : 

• Un constat sur un seul participant, mais qui vous semble si important 
que vous decidez de le prendre en compte. 

• Des patterns de comportement, e'est-a-dire des constats qui doivent 
s'appliquer a un nombre suffisamment significatif de participants 
pour donner lieu a une modification. 

Encore une fois, on n'est pas dans le « statistiquement significatif » : le 
jugement se fait au cas par cas, en fonction de la nature du defaut cons- 
tate et de l'importance que vous lui accordez en tant qu' expert. 

Comme nous l'avons deja evoque dans le chapitre 6 sur l'audit ergono- 
mique, vous devez hierarchiser vos observations selon leur importance. Cer- 
taines observations ne seront pas critiques d'un point de vue ergonomique 
mais, repetees, elles peuvent amener votre internaute a preferer un autre site. 
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Enfin, ne vous limitez pas uniquement a ce que vous pouvez modifier a 
court terme ! Un test utilisateur sert a degager les defauts d'une inter- 
face, mais la resolution de ces defauts peut etre lourde a mettre en place. 
La ponderation de type « Voila ce que nous allons faire » n'est que la 
derniere etape de votre analyse. 



Interpretation et pistes de resolution 

Interpretation des observations 

Une fois que vous avez fait des constats (par exemple : « 70 % des inter- 
nautes ont fait au moins une erreur de parcours avant de trouver le 
produit »), vous devez en trouver la cause. Pour cela, vous devez inter- 
preter ce que vous avez vu et entendu, afin de trouver la raison pour 
laquelle les utilisateurs ont echoue, mis trop de temps, ou n'ont pas aime 
l'interface. Ce n'est qu'apres avoir compris ces raisons que vous trouverez 
les meilleures solutions pour resoudre les problemes. 
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Figure 11-24 Extrait de test utilisateur sur un prototype semi-fonctionnel du site de la Camif. 
Verbalisations de trois participants souhaitant supprimer un article du panier. 
www.camif.fr 
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Par exemple, un test utilisateur sur un prototype semi-fonctionnel du 
site de la Camif permet de remarquer qu'un nombre important de parti- 
cipants ne trouvent pas comment supprimer un article dans le panier. 
On observe en outre qu'apres avoir longuement cherche, certains adop- 
tent des strategies de contournement, notamment en essayant d'utiliser 
le champ Qte de la Commande par references (figure 11-24). 

L'interpretation de ces constats peut conduire a supposer que la fonction 
de suppression manque de visibilite et que les internautes, faute de 
mieux, se reportent sur la Commande par reference, la confondant avec 
le panier. Dans ce cas, avoir mene le test utilisateur sur un prototype 
semi-fonctionnel et non sur le site final permet de mettre en evidence 
ses defauts et, ainsi, de les corriger avant de mettre en ligne la version 
finale du site. Les modifications sont done plus faciles a mettre en ceuvre 
que lorsque le site est entierement developpe et Ton ne propose pas aux 
internautes un site defaillant d'un point de vue ergonomique. 

Trouver des solutions 

L'objectif final de cette analyse est de developper des suggestions pour 
contourner le probleme, ameliorer l'interface la ou elle est mal concue. A 
partir des indices fournis par les observations, vous deduisez qu'il faut 
modifier un element dans tel ou tel sens. 

Si Ton reprend l'exemple precedent sur le site de la Camif, les resultats 
observes et leur interpretation permettent de formuler des recommanda- 
tions pour augmenter la visibilite (grace a un contraste de couleurs plus 
affirme) ainsi que le caractere explicite de la fonction de suppression de 
chaque article (notamment par l'utilisation du mot supprimer plutot que 
d'une icone, ce qui s'impose du fait de la specificite dage de la cible uti- 
lisateur). On recommandera aussi de reduire l'ambiguite liee a la pre- 
sence de la commande par reference a proximite immediate du panier. 

Dans l'ideal, il est preferable de concevoir des solutions visuelles pour 
concretiser ces suggestions. Ces solutions peuvent etre formalisees sous 
forme de maquettes conceptuelles, a destination de l'equipe de develop- 
pement ou pour supporter une nouvelle session de test. Prenons 
l'exemple du test utilisateur sur la bourse de transmission d'entreprises 
du site d'OSEO (figure 11-25). 

Lors du test, on a constate que beaucoup de participants semblent vouloir 
renseigner trois activites. On recommande done de commencer par 
demander de choisir entre Commerce, Services et Production, puis de 
presenter la liste des types d'activites seulement en deuxieme lecture, afin 
de mieux assister les internautes dans le renseignement de leur activite. 
Cette recommandation est concretisee par une maquette conceptuelle. 
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Figure 11-25 

Page de recherche de la Bourse de Transmission 
sur I'ancienne version du site d'OSEO. 
Source : www.oseo.fr 
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Figure 11-26 La maquette conceptuelle permet de concretiser la recommandation enoncee suite aux resultats 

du test utilisateur. 

Source : Specifications ergonomiques Bourse de la Transmission www.oseo.fr 
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Le rapport de test 

Votre travail touche a sa fin. Si vous devez ecrire un rapport de test pour 
communiquer vos resultats et justifier les modifications a entreprendre, 
vous devez raconter 1'ensemble des etapes que nous venons de detailler, 
de maniere plus ou moins approfondie selon le temps qui vous est 
imparti et les necessites en termes de justification. 

N'hesitez pas a citer les participants pour avoir plus d'impact et pour que 
vos lecteurs comprennent reellement les problemes rencontres par les inter- 
nautes, ainsi que leur impact sur le ressenti subjectif. Voyez comme la resti- 
tution suivante avec les commentaires des utilisateurs permet de vraiment 
comprendre leur situation et, par consequent, de tout faire pour ameliorer 
l'interface afin de leur faciliter la tache (figures 11-27 et 11-28). 
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Figure 11-27 

Sur le prototype semi-fonctionnel utilise 

lors du test utilisateur sur le site de la Camif, 

le panneau flottant de confirmation 

d'ajout au panier apparait pendant 

5 secondes, puis se retire. 

Source : www.camif.fr 




METHODOLOGIE Gardez les noms des participants confidentiels ! 

Pour des raisons de confidentialite, lorsque vous 
redigez un rapport de test, ne citez jamais le nom des 
participants. Des le debut de I'etude, constituez-vous 
une grille de correspondance entre le nom de la per- 
sonne et un code que vous lui attribuerez. II est interes- 
sant de composer ce code a partir d'un numero 
representant I'ordre de passage et d'une lettre repre- 
sentant le type de participant. 

Par exemple, Etienne Langereau deviendra 3C, parce 
qu'il est le 3eme participant a avoir passe le test et qu'il 



est deja client du site (d'ou la lettre « C »). L'attribution 
de ce type de codes deshumanise le participant et c'est 
exactement I'effet recherche. Une fiche recapitulative 
des caracteristiques du participant (sexe, age, CSP, 
metier, niveau d'expertise Internet, etc.) permettra a vos 
lecteurs de faire le rapport entre un code et un profil. 
Vous pouvez d'ailleurs indiquer a votre participant que 
son nom restera confidentiel et que vous serez le seul a 
en avoir connaissance. 
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LCUC SUB AJOUTEE A MON PANIEB] OH 

D'ACCOED, IL. S'EM </A UN PEU VITE L.UI [CL-IC 

SUB AJOUTEE A MOM PANIEB] OUI, POUBGUOI IU 
EESTE PAS COMME CA, C'EST AS-ACANTi--- 
[CUC SUE AJOUTEE A" MON PANIEB] JE 
T'AUEAISi ON PEUT PAS L.E COINCEE? OUI NON 
L-A C'EST IDIOT, ON PEUT PAS (,'ABBETEB, Y'A 
EIEM A FAIEE-- OH OUI, C'EST MEME TEES 
A&ACANTi 




DONC, AJOUTEE A MOM PAMIEE 
[CUC SUE AJOUTEE A MOM 
PAMIEE]- OUIII-- MAIS, J'AI CUOUE 
DESSUS OU PAS? ... [CUC SUE 
AJOUTEE A MON PAMIEE]- OHi CET 
AETICUS A ETE AJOUT6... MAISi JE 
SAIS PAS, J'AVAIS UME FENETEE, 
EU-E S'EST BAEEgBi J'AI PAS EU 
U3 TEMPS t>E UIEE-- 



Un test utilisateur a votre mesure 

Nous n'avons cesse de repeter, tout au long de ce chapitre, que les regies 
presentees etaient adaptables en fonction de votre projet et de vos res- 
sources. II y a bien sur un ideal du test utilisateur, mais il est evident qu'il 
nest pas applicable a tous les projets, ou a n'importe quel moment dans 
un projet. L'important, e'est de faire des tests utilisateurs. Si vous man- 
quez de temps, d'argent, de participants, de support de test, etc., votre 
test vaut quand meme la peine d'etre mene. Le tableau suivant recapi- 
tule ainsi les points-cles de la methodologie classique et ses adaptations 
si vous ne pouvez vous permettre d'aller aussi loin. 

Tableau 11-7 Caracteristiques des tests classique et rapide 



Figure 11-28 

Ces remarques entendues lors de I'ajout d'un 
article au panier permettent de reellement 
comprendre le desarroi des participants. Elles 
ont done joue un role important dans la prise 
en compte de ce defaut, et sa resolution sur le 
site final de la Camif. 





Test utilisateur classique 


Test utilisateur rapide 


Duree 


Environ 1h. 


A partir de 10 minutes. 


Nombre de participants 


A partir de 8 participants pour esperer mettre en 
lumiere 80 % des problemes d'utilisabilite. 
A partir de 20 participants pour esperer mettre en 
lumiere 95 % des problemes d'utilisabilite. 


A partir de 1 participant. 


Representative des partici- 
pants 


Les participants ont les memes caracteristiques que 
la cible. 


Les participants peuvent etre 
moins proches de la cible. 


Rigueur du plan de test 


Plan de test rigoureux. 


Plan de test moins rigoureux. 
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Tableau 11-7 Caracteristiques des tests classique et rapide (suite) 





Test utilisateur classique 


Test utilisateur rapide 


Methode d'enregistrement 
des observations 


Vous enregistrez au moins I'ecran et prenez des 
notes. Au mieux, vous enregistrez une vue du parti- 
cipant et sa voix, ainsi que le parcours de I'ceil. 


Vous prenez des notes. 


Suite des evenements 


Vous analysez les resultats en detail, en tirez des 
conclusions et des pistes de correction. 


Vous decidez sur le vif de ce 
qui doit etre modifie. 



Bien sur, les caracteristiques du test rapide ne sont que des planchers et 
vous devez essayer au maximum d'augmenter la qualite de chacun des 
parametres. Si vous devez en choisir un, ce doit etre la representativite 
de vos participants. 

Si les caracteristiques d'un test utilisateur rapide vous permettent d'en 
mener plus tot dans le processus de developpement de votre site, 
n'hesitez pas une seconde. En effet, realiser des tests le plus tot possible 
est un critere surpassant tous les autres. Effectuer les tests utilisateurs en 
amont est tout sauf anodin, puisque cela signifie que les modifications 
consecutives au test seront plus faciles a mettre en ceuvre. Si vous etes 
encore en phase de conception, cela sera facile ; en phase de design, un 
peu moins facile et en phase de developpement encore moins facile. Et il 
y a encore des degres de facilite au sein de chacune de ces phases. 

Pour resumer, faire un test utilisateur juste avant le lancement d'un site, 
c'est accepter de ne pouvoir apporter que des modifications de surface (et 
encore, quand elles seront possibles...). Elles ne permettront done pas for- 
cement d'optimiser veritablement ce qui fait l'ergonomie d'un site web. 



Aller plus loin que le test utilisateur : 
I 'usage reel 

Les tests utilisateurs, couples ou non avec de l'eye-tracking, sont la methode 
la plus pertinente qui existe pour obtenir un retour utilisateur en face a 
face. Cependant, ce n'est pas une panacee. On peut aller encore plus loin 
dans la recolte de donnees liees a l'usage. 

Ce qui manque notamment aux tests utilisateurs, c'est la composante de 
realite. Lors des sessions de test, les situations de navigation que Ton pro- 
pose aux participants doivent etre les plus realistes possibles. Cependant, 
cela ne remplace pas une information exacte sur ce que font reellement les 
internautes sur votre site web. 

Meme si les donnees recueillies sont extremement riches d'enseigne- 
ments, il reste que le test utilisateur est une situation d'etude. En tant que 
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telle, elle est soumise a tous les biais que Ton connait de ces situations. A 
moins d'etre expert en espionnage, il n'existe done pas d'autre moyen que 
d'enregistrer les interactions en temps reel. 

Bien sur, ce que Ton peut enregistrer est limite aux actions de l'internaute ; on 
n'accede pas a ses pensees et interrogations. Toutefois, ses actions temoi- 
gnent du fait que Ton ait atteint ou non notre objectif. Les actions d'un 
internaute deviennent encore plus interessantes lorsque leur occurrence a 
des consequences sur le taux de transformation d'un site. 

C'est la qu'interviennent les tests de comportement, bases sur la recolte de 
donnees d'interaction sur des trafics utilisateurs volontairement repartis en 
differents groupes. Autrement dit, ce type de tests consiste a proposer plu- 
sieurs versions de votre site de facon aleatoire a vos visiteurs. De maniere 
simplified, si Marc vient sur le site, il verra la version A, alors que si Caro- 
line vient sur le site, elle verra la version B. 

L'interet principal des tests comparatifs de ce type, c'est de pouvoir com- 
parer des choses comparables. Si vous testez differentes versions de votre 
site les unes apres les autres en essayant de mesurer laquelle s'avere etre la 
plus efficace, vous risquez de faire des interpretations erronees. En effet, 
vous ne tiendrez pas compte des elements autres que l'ergonomie venant 
modifier le site : periode calendaire (vacances scolaires, fetes de fin 
d'annee, etc.), bannieres d'auto-promotion, offres en cours, disponibilite 
des produits ou meme meteo exterieure... Cela revient presque a vouloir 
comparer des pommes et des poires. 

Deux grands types de tests existent : 

• les tests A/B consistent a comparer deux versions d'une meme page 
en mesurant l'efficacite de chacune d'elles sur votre taux de transfor- 
mation ; 

• les tests multivaries, quant a eux, reposent sur le decoupage de votre 
page en plusieurs elements (exemple : la photo de votre produit, le 
libelle du bouton d'action et la longueur du descriptif produit). C'est 
ensuite pour chacun des ces elements que vous allez creer plusieurs 
versions. Les systemes de tests se chargent alors de creer toutes les 
combinaisons possibles en croisant les modalites de chaque variable. 

Quelle que soit la methode employee, l'idee consiste toujours a observer, 
au vu des usages reels de vos internautes, quelle version de page est la plus 
efficace et vous permet de rencontrer au mieux vos objectifs strategiques. 
Vous pouvez ainsi mesurer la consequence des versions testees sur de 
nombreux criteres : nombre d'ajouts au panier, nombre de commandes 
finalisees, nombre de produits par panier, chiffres d'affaires, montant 
moyen du panier, nombre d'inscriptions a votre newsletter, nombre de 
telechargements de votre livre blanc, etc. 



Definition Qu'est-ce que le taux 
de transformation ? 

Le taux de transformation est un indicateur de 
reference pour traduire la performance de votre 
site en fonction de ce que vous souhaitez que vos 
internautes fassent. Sur un site d'e-commerce par 
exemple, oil I'objectif est tres souvent que les visi- 
teurs achetent des articles, le taux de transforma- 
tion represente le nombre d'internautes ayant 
achete quelque chose sur le nombre total de visi- 
teurs du site. Ainsi, un taux de transformation de 
4 % signifie que sur 100 visiteurs, 4 ont precede a 
un achat. 
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Les tests A/B ou multivaries sont plus difficiles a mettre en oeuvre qu'un 
test utilisateur, puisqu'ils reposent sur 1'implementation d'outils specifi- 
ques (Google Website Optimizer, Test&Target d'Omniture, Avenseo, 
Optimost d'Interwoven, Amadesa, etc.)- Cet effort est souvent largement 
recompense par le niveau de precision et de validite des resultats obtenus. 
En effet, le grand avantage de ce type de tests est de pouvoir disposer d'un 
panel si large que les resultats observes peuvent etre statistiquement fia- 
bles. Enfin, les effets directs obtenus sur les taux de transformation sont 
evidemment tees interessants pour les sites professionnels. 

Pour terminer, soulignons tout de meme que le piege de ces outils, qui 
peuvent sembler « magiques », est de remplacer toute demarche centree 
utilisateur par ce type de solutions. En effet, elles ne remplacent en aucun 
cas une connaissance qualitative des internautes, et ne peuvent done etre 
considerees que comme un outil complementaire pour optimiser l'ergo- 
nomie de votre site web. 
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Conclusion 



Nous concluons done cet ouvrage sur la methode du test utilisateur, ter- 
minant ainsi sur une pratique ideale pour toute demarche d'optimisation 
ergonomique d'un site web. Cette methode du test est en effet celle qui 
represente le mieux ce qui caracterise veritablement l'ergonomie, a savoir 
essayer de se situer au plus pres des utilisateurs reels. En ce sens, e'est 
une methode devaluation privilegiee, permettant d'obtenir une finesse 
de resultats inegalable. 

On resume ainsi l'essentiel de ce que vous devez avoir appris a la lecture 
de ce livre. C'est precisement cela que nous avons essaye de vous trans- 
mettre au fil de ces 11 chapitres : une prise en compte veritable de vos 
internautes, en amont, et une adaptation de la conception a leurs 
besoins. Cette prise de position, qui parait logique quand on pense a la 
finalite meme du Web (a savoir, creer des sites pour des utilisateurs), fait 
cruellement defaut dans les projets actuels. Puisque vous avez mainte- 
nant toutes les cartes en main, a vous de jouer pour decider de l'orienta- 
tion que prendra votre site. Si vous prenez serieusement en compte 
toutes les regies et methodes presentees dans ce livre, vous etes a meme 
d'ameliorer l'ergonomie de votre site et done de faire la difference ! 



Et apres ? 



II n'y a pas d'apres. Le travail sur l'ergonomie d'un site n'est pas seule- 
ment une activite ponctuelle. C'est essentiellement une activite quoti- 
dienne, qui doit impregner chacune des decisions que vous prenez. Nous 
parions qu'apres avoir referme ce livre, vous verrez deja les choses autre- 
ment et que votre vision de la conception web aura change. Vous detec- 
terez tres vite quelles ameliorations peuvent etre apportees a votre site et 
vous serez de plus en plus fort a mesure que vous avancerez dans ce sens. 



Ainsi, si vous croyez en avoir termine avec l'ergonomie de votre site, 
nous n'avons qu'un seul conseil a vous donner : recommencez du debut. 
Une des caracteristiques essentielles de la demarche ergonomique reside 
en effet dans sa nature cyclique : chaque chose que Ton fait se base sur 
les enseignements precedents et peut toujours etre affmee, en procedant 
a des iterations successives. En fonction des specificites de votre projet, 
vous saurez si la qualite ergonomique que vous avez reussi a atteindre est 
acceptable ou necessite de travailler de maniere plus approfondie. 

Enfin, pour aller plus loin, vous devez exploiter tout ce qui passe, vous 
confronter au maximum d'interfaces, de sites, de projets, d'internautes, 
et beaucoup lire. Plus vous le nourrirez de vos experiences, plus votre 
bagage ergonomique vous aidera a faire d'un site web un endroit ou il 
fait bon vivre. 
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Suggestions de lecture 








k. 


/ Sit 


Inf 


^r»at1 n 




:A'rcinitecEure 


& 





Livres 

Void une courte liste de livres dont nous vous suggerons la lecture. Ce 
n'est la que le resultat d'une selection parmi le grand nombre d'ouvrages 
existant sur le sujet, mais elle vous propose les references les plus interes- 
santes. Nous avons opere une distinction entre les livres privileges pour 
les debutants et ceux destines a nos lecteurs les plus avances. Lorsqu'un 
livre a ete traduit en langue francaise, nous indiquons les deux refe- 
rences. Nous vous conseillons toutefois de toujours lire la version origi- 
nale, ce qui s'avere primordial pour parfaitement saisir les finesses du 
discours. En outre, l'anglais utilise dans ces livres etant plutot d'ordre 
« technique », vous n'aurez pas de mal a comprendre ce qui se dit. 

Pour commencer 

Krug Steve, Don't Make Me Think : A Common Sense Approach to Web Usa- 
bility, New Riders Press, 2005 (2 e edition) (en francais, Zero prise de tete: 
Quelques regies simples et un zeste de bon sens pour concevoir des sites web intui- 
tifs et efficaces, Dunod, 2001). Le livre le plus accessible de tous, qui vous 
permettra de comprendre l'importance de l'ergonomie et comment la pra- 
tiquer au plus bas niveau. Court, plein d'humour, parfait pour debuter. 

Wodtke Christina, Information architecture - Blueprints For The Web, New 
Riders, 2002. Attention, ne vous y trompez pas : ce livre ne parle pas exclu- 
sivement d'architecture de l'information. Cette discipline etant etroitement 
liee aux problematiques d'ergonomie, vous trouverez dans l'ouvrage de 
Christina Wodtke aussi bien des principes et methodes d'architecture et de 
navigation que des conseils en utilisabilite web. C'est un petit livre qui se 
parcourt facilement et presente des idees simples mais bien argumentees. 
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Nielsen Jakob, Designing Web Usability: The Practice of Simplicity, New 
Riders Publishing, 1998 (en francais, Conception de sites web : L'Art de la 
simplicity CampusPress, 2000). Une vue assez complete du domaine par 
le specialiste le plus connu au niveau mondial. Ce livre commence a etre 
un peu ancien au niveau des exemples utilises, mais Jakob Nielsen n'a ecrit 
depuis que des ouvrages plus specifiques (voir notamment Homepage Usa- 
bility et Prioritizing Web Usability). En outre, une grande part des prin- 
cipes abordes sont toujours d'actualite. Toujours une reference, done. 

Garrett Jesse James, The Elements of User Experience : User-Centered 
Design for the Web, New Riders Press, 2002. Un petit livre qui se propose 
d'aborder le processus de conception centree utilisateur grace a un modele 
theorique juste et passionnant. Jesse James Garrett disseque l'experience 
utilisateur pour la presenter brillamment selon 5 niveaux. Pour vous con- 
vaincre et comprendre les principes et les subtilites de la discipline. 

Nielsen Jakob 8cTahir Marie, Homepage Usability : 50 Websites Decons- 
tructed, New Riders Press, 2001 (en francais, L'art de la page d'accueil : 50 
sites web passes au crible, Eyrolles, 2002). Un ouvrage qui vous permettra 
de comprendre comment mettre en application les principes de l'ergo- 
nomie web sur un sujet en particulier : la page d'accueil. 50 cas pratiques 
sont precedes de references statistiques et de 113 bonnes pratiques pour 
la conception des pages d'accueil. 

Nielsen Jakob 8c Loranger Hoa, Prioritizing Web Usability, New Riders 
Press, 2006 (en francais, Site Web : priorite a la simplicity, Pearsons Edu- 
cation, 2007). Le dernier livre en date de Jakob Nielsen (on attend 
impatiemment pour cet hiver son opus sur 1' eye-tracking), tres interes- 
sant et abondamment illustre par des mises en pratique des idees qu'il 
defend. Les auteurs y presentent comment ponderer les observations 
que Ton fait sur l'utilisabilite d'un site web. 

Cooper Alan, The Inmates Are Running the Asylum : Why High Tech Pro- 
ducts Drive Us Crazy and How to Restore the Sanity, Sams - Pearson Edu- 
cation, 2004. Cet ouvrage parle de notre rapport a la technologie et du 
design d'interaction comme voie salvatrice. Pour vous faire une idee un 
peu plus large sur ce qui conditionne nos experiences avec les machines 
et sur la maniere dont on peut les optimiser. C'est dans ce livre que 
Cooper presente pour la premiere fois, de maniere formelle, la notion de 
personas. 

Koyani Sanjay J., Bailey Robert W. 8c Nail Janice R., Research-Based 
Web Design & Usability Guidelines, Computer Psychology, 2004. Un 
ouvrage tres pratique, edite par www.usability.gov, qui dresse une liste tres 
approfondie des bonnes pratiques de l'ergonomie web. A chaque recom- 
mandation sont associes un commentaire, la liste des sources bibliogra- 
phiques et un exemple visuel. Les auteurs donnent aussi un critere 
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d'importance et un critere de validite base sur les resultats scientifiques 
obtenus a ce jour. Disponible gratuitement en version pdf a l'adresse 
suivante : http://www.usability.gov/pdfs/guidelines.html. 



Pour aller plus loin 

Rosenfeld Louis 8c Morville Peter, Information Architecture for the World 
Wide Web, O'Reilly Media, 2006 (3 e edition). La bible de l'architecte de 
rinformation et de tous ceux qui veulent approfondir leurs connaissances 
dans ce domaine. Les auteurs commencent par presenter le concept 
d'architecture de rinformation, puis la maniere de proceder pour opti- 
miser tout ce qui permet de trouver de rinformation sur le Web : sys- 
temes de navigation, de recherche, terminologies, etc. 

BrinckTom, Gergle Darren 8c Wood Scott D., Usability for the Web : 
Designing Web Sites that Work, Morgan Kaufmann, 2001. C'est le livre le 
plus complet sur l'ergonomie web, qui aborde chacune de ses dimensions 
et vous offre une vue transversale de ce qui fait la qualite d'utilisation 
d'un site Internet. Les auteurs y detaillent avec precision et clarte les 7 
grandes etapes d'un projet de developpement web, ainsi que le role et les 
methodes de l'ergonomie a chacune de ces etapes. 

Kuniavsky Mike, Observing the User Experience : A Practitioners Guide to 
User Research, Morgan Kaufmann, 2003. Un livre dedie aux differentes 
methodes de recherche impliquant la participation d'utilisateurs : analyse 
de la tache, tests utilisateurs, entretiens, focus groups, tri de cartes, etc. 

Rubin Jeffrey, Handbook of Usability Testing : How to Plan, Design, and 
Conduct Effective Tests, Wiley, 1994. Une reference dediee a la methode 
des tests utilisateurs, pour vous aider a en comprendre les principes de 
maniere approfondie et a les mettre en oeuvre efficacement. 

Van Duyne Douglas K., Landay James A. 8c Hong Jason I., The Design of 
Sites : Patterns for Creating Winning Web Sites, Prentice Hall PTR, 2006 
(2 e edition). Un livre original et tees bien documente, qui se propose de 
vous aider a optimiser l'utilisabilite de votre site web grace au recensement 
de modeles de presentation et d'interaction existant sur le Web. A lire de 
maniere non lineaire, en fonction du theme qui vous preoccupe. 

Cooper Alan, Reimann Robert 8c Cronin David, About Face 3 : The Essen- 
tials of Interaction Design, Wiley, 2007 (3 e edition). Une reference de poids 
dans le domaine de l'interaction homme-ordinateur, recemment remise a 
jour. Vous y trouverez de nombreuses problematiques abordees de maniere 
tees serieuse, entre autres : personas et objectifs utilisateurs, scenarios d'uti- 
lisation, principes et modeles de conception, design d'interface et design 
d'interaction, ergonomie de divers modes d'interaction (manipulation 
directe, fenetrage, menus, messages systemes, barres d'outils), etc. 
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Bias Randolph G. & Mayhew Deborah J. (Eds), Cost-Justifying Usabi- 
lity, Morgan Kaufmann, 2003. Un ouvrage collectif entierement con- 
sacre a la problematique du retour sur investissement lie a la mise en 
place d'une demarche d'optimisation relative a la qualite d'utilisation 
d'une interface. Etudes de cas, statistiques et conseils pour mieux vendre 
la demarche ergonomique. 



Sur le Web 



Sites Internet 

Void quelques references parmi nos preferees sur le Web, mais n'hesitez 
pas a aller fouiller : les sites consacres a l'ergonomie web ou evoquant 
une de ses dimensions sont nombreux dans le monde anglophone. 

• Boxes And Arrows. Un journal en ligne initialement consacre a 
l'architecture de l'information, qui s'est depuis etendu aux problemati- 
ques de design d'interface et d'interaction. Des articles complets et 
ecrits par des specialistes (Christina Wodtke, Erin Malone, George 
Olsen, Jeff Lash, Luke Wroblewski, Jesse James Garrett. . .). Mention 
speciale. 

http://www.boxesandarrows.com 

• Digital Web. Un magazine incontournable, consacre au Web. Frais 
et agreable a lire. A surveiller particulierement, les themes Keep it 
Simple, Information Design, Information Architecture, Interaction 
Design, Human-Computer Interaction, Navigation, Usability, User 
Experience, User- Centered Design . 

http://www.digital-web.com 

• Useit.com. On ne presente plus le site de Jakob Nielsen, avec sa sec- 
tion Alertbox et la possibilite de consulter les archives depuis 1995. 
http://www.useit.com 

• Guuui.com, The interaction designer coffee break : des articles et pen- 
sees d'Henrik Olsen sur l'architecture de l'information, le design 
d'interaction, l'utilisabilite et tout ce qui peut optimiser l'experience 
utilisateur au sens large. 

http://www.guuui.com 

• Usability.gov. Site gouvernemental proposant a la fois des ressources 
internes et un portail tees complet pour la conception d'interfaces 
utiles, utilisables et accessibles. Classement par thematiques ( Usabi- 
lity Basics, Methods for Designing Usable Web Sites, Guidelines and 
Checklists, Server Log Analysis, Accessibility Resources...). 
http://www.usability.gov 
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Ergologique. Le site emmene par Emeric Thoa et Louise Fantini a 
pour objectif de sensibiliser les createurs d'interfaces a ces notions 
d'ergonomie et d'utilisabilite. 
http://www.ergologique.com 

L'ergonome : les articles de l'ergonome ont pour but de « renseigner 
les lecteurs sur ce domaine [l'ergonomie] en emergence dans le 
domaine des NTIC ». 
http://www.lergonome.org/pages/articles.php 

Ergolab. Le petit frere de ce livre est un site de ressources en ergo- 
nomie web et logicielle, ou je propose depuis 2003 des articles, chro- 
niques, notes et liens pour optimiser la qualite d'utilisation des 
interfaces informatiques. 
http://www.ergolab.net 



Forums et listes de discussion 

Vous n'apprendrez jamais autant qu'en vous frottant a de reelles proble- 
matiques de conception. Les forums et listes de discussion sont a cet 
effet des sources precieuses pour vous documenter, poser des questions 
et vous tenir au courant de ce qui se fait et se dit dans le domaine. Les 
listes anglophones sont indeniablement le lieu le plus adequat pour 
quelqu'un qui souhaite beneficier de visions et de conseils pointus. 

• CHI-WEB. Liste de discussion sur les facteurs humains, l'interac- 
tion homme-ordinateur et le World Wide Web. 
http://sigchi.org/web 

• Experience Design. Groupe de discussion Yahoo! sur l'experience 
utilisateur au sens large. 
http://finance.groups.yahoo.com/group/experiencedesign 

• Forums cre8asite. Forums evoquant tous les aspects de la conception 
d'un site web. Salons fetiches : Usability, Site Planning and Prepara- 
tion, Website Design, Writing Copy and Content for the Web, Internet 
haw and Ethics, Virtual Learning and Web Training, Search Engines 
and Optimization (SEO, Google, Yahoo...). 
http://www.cre8asiteforums.com/forums 

• ID Discuss. Interaction Designers est une liste de diffusion moderee, 
sur les themes du design de l'information, du design d'interaction, de 
l'utilisabilite et de la conception centree utilisateur. 

http://www.ixda.org/en 
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Sigia-L. Liste de discussion sur le sujet central de l'architecture de 

l'information, mais s'etendant beaucoup plus largement a toutes les 

problematiques de l'ergonomie. 

http://mail.asis.org/mailman/listinfo/sigia-l 

ErgoIHM. La premiere liste de diffusion francaise sur l'ergonomie 

des interfaces homme-machine. 

http://listes.cru.fr/sympa/info/ergoihm 
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Pour que I'informatique 
soit un outil 

et non un ennemi ! 



Ergonomie 

des sites^ 

-» 2 e ed. 



Quelles regies pour seduire 
et fideliser votre internaute ? 

Tout site Internet doit reussir le pari 
difficile de satisfaire ses visiteurs. 
Mais comment connaitre ces demiers? 
Comment se mettre a leur place ? 
Comment concevoir un site si agreable 
et efficace qu'il donne envie d'y rester et 
d'y revenir? 

Grace aux conseils pratiques et metho- 
dologiques de cette nouvelle edition, qui 
tient compte de revolution du Web avec 
plus de 50 nouveaux exemples, compre- 
nez et appliquez I'ergonomie web sur le 
terrain ! 



Consultante en ergonomie et architecture de 
I'information, Amelie Boucher est diplomee 
de I'Universite Paris 5. Elle travaille sur ['optimisa- 
tion d'interfaces web et mobiles pour SFR, la 
Caisse d'Epargne, EMI, la Poste, OSEO... A travers 
des methodes telles que I'audit ergonomique, le 
test utilisateur, le maquettage conceptuel ou en- 
core ('analyse concurrentielle, elle ameliore 
I'ergonomie des interfaces. Convaincue de ('im- 
portance de sensibiliser I'ensemble des acteurs du 
Web aux bonnes pratiques de I'ergonomie, elle 
lance en 2003 le site de reference Ergolab.net. 

ergolab 
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Alliez ergonomie et efficacite : 
concevez des sites pour vos utilisateurs 

— > Maitrisez les 12 premieres regies de I'ergonomie 

— > Debarrassez-vous enfin des idees reques sur I'ergonomie web 

• Maniez les personas pour vous mettre 
dans la peau de vos internautes 

-^ Auditez I'ergonomie de votre site web 



Optimisez les parcours client dans votre site 

Realisez des zonings et des maquettes conceptuelles 

Evaluez les usages par des tris de cartes, des tests utilisateurs 
et de comportement 

Inspirez-vous de revolution de sites reels pour ameliorer 
votre ergonomie 

Decouvrez les fondements theoriques de I'ergonomie 
(accessibilite visuelle, loi de Fitts, affordances, 
theories de la Gestalt...) 



A qui s'adresse cet ouvrage ? 

■ Concepteurs web, ergonomes, architectes 
de I'information, redacteurs 

Developpeurs web, webmestres et chefs de projet 

Directeurs artistiques, responsables marketing, 
chefs de produit et directeurs de clientele 

■ Toute personne souhaitant realiser un site web 



Telechargez des complements et 
retrouvez I'auteur sur le site du livre ! 
www.ergonomie-sites-web.com 



